/* ═══════════════════════════════════════════════════════════
   LÔ BENTO — Creative Department OS
   Aesthetic: Y2K chrome / techno-grotesk, on a macOS desktop
   ═══════════════════════════════════════════════════════════ */

:root{
  --bg:#080a0d;
  --panel:#0f1216;
  --panel-2:#14181d;
  --panel-3:#191d23;
  --line:rgba(255,255,255,.105);
  --line-2:rgba(255,255,255,.19);
  --fg:#e9ecf0;
  --fg-2:#a5acb7;
  --fg-3:#6d757f;
  --go:#54e06a;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --sans:"Helvetica Neue",Helvetica,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --mb:26px;
  --ease:cubic-bezier(.22,.61,.36,1);
  /* overridden at runtime by render.js from content.js */
  --paper-bg:#f6f6f4;
  --paper-fg:#16181c;
  --win-radius:11px;
  --mq-speed:46s;
  --seal-opacity:.5;
  /* Layout da área de trabalho. Tudo aqui é ajustável pelo painel
     (Aparência > Layout) — por isso são variáveis e não números soltos. */
  --mesh-scale:1;          /* tamanho do 3D no desktop */
  --mesh-scale-m:1;        /* tamanho do 3D no celular */
  --stage-top:46%;         /* altura do palco (3D + assinatura) */
  --icons-top:22px;
  --icons-right:22px;
  --icons-gap:6px;
  --hint-side:26px;
  --hint-bottom:112px;
  --hint-br-right:170px;   /* folga entre o texto da direita e a coluna de ícones */
  --hint-max:430px;
  --dock-bottom:12px;
  --sky-top:#070c14;
  --sky-upper:#1e3c5b;
  --sky-mid:#3a5b7c;
  --sky-horizon:#7f8b98;
  --sky-bottom:#5c6672;
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow:hidden;
}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit}
::selection{background:#3b4a5e;color:#fff}

/* chrome text utility */
.chrome{
  background:linear-gradient(148deg,#fff 0%,#cdd5df 15%,#8d97a6 31%,#f2f6fa 46%,#69737f 60%,#dbe2ea 76%,#98a2b0 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ═══════════ BOOT ═══════════ */
#boot{
  position:fixed;inset:0;z-index:9999;background:#050609;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px;
  transition:opacity .55s var(--ease),visibility .55s;
}
#boot.done{opacity:0;visibility:hidden;pointer-events:none}
.boot-mark svg{display:block;width:86px;height:auto;fill:url(#chromeSeal)}
.boot-meter{
  display:flex;align-items:center;gap:14px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(233,236,240,.5);
}
.boot-meter #boot-pct{color:rgba(233,236,240,.9);font-variant-numeric:tabular-nums}
.boot-bar{width:180px;height:3px;background:rgba(255,255,255,.12);border-radius:3px;overflow:hidden}
.boot-bar i{display:block;height:100%;width:0;background:#e9ecf0;transition:width .3s var(--ease)}
@keyframes load{to{width:100%}}

/* ═══════════ DESKTOP ═══════════ */
#desktop{position:fixed;inset:0;overflow:hidden}

#wallpaper{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.sky{
  position:absolute;inset:0;
  background:linear-gradient(180deg,
    var(--sky-top) 0%, var(--sky-upper) 34%, var(--sky-mid) 56%,
    var(--sky-horizon) 84%, var(--sky-bottom) 100%);
}
/* cloud bank — layered puffs, lit from below */
.clouds{
  position:absolute;left:-6%;right:-6%;bottom:-4%;height:62%;
  opacity:.78;filter:blur(6px) contrast(1.22);
  background:
    radial-gradient(26% 46% at 12% 62%,rgba(232,239,246,.95),transparent 68%),
    radial-gradient(20% 38% at 26% 48%,rgba(214,225,236,.9),transparent 68%),
    radial-gradient(30% 52% at 40% 66%,rgba(240,245,250,.92),transparent 68%),
    radial-gradient(22% 40% at 55% 46%,rgba(203,216,229,.86),transparent 68%),
    radial-gradient(28% 48% at 68% 64%,rgba(236,242,248,.92),transparent 68%),
    radial-gradient(24% 42% at 84% 50%,rgba(208,220,232,.88),transparent 68%),
    radial-gradient(30% 46% at 96% 66%,rgba(230,238,245,.9),transparent 68%),
    linear-gradient(180deg,transparent 0%,rgba(214,225,236,.5) 46%,rgba(150,163,177,.62) 100%);
}
.clouds::after{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(18% 30% at 20% 84%,rgba(122,136,152,.5),transparent 70%),
    radial-gradient(22% 34% at 62% 88%,rgba(108,122,138,.48),transparent 70%),
    radial-gradient(20% 30% at 90% 82%,rgba(126,140,155,.46),transparent 70%);
}
.scan{
  position:absolute;inset:0;mix-blend-mode:overlay;opacity:.34;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.6) 0 1px,transparent 1px 3px);
}
.vig{
  position:absolute;inset:0;
  box-shadow:inset 0 0 180px 40px rgba(0,0,0,.55);
  background:
    linear-gradient(0deg,rgba(3,6,11,.8) 0%,rgba(3,6,11,.34) 14%,transparent 30%),
    radial-gradient(125% 95% at 50% 38%,transparent 42%,rgba(4,7,12,.5) 100%);
}

/* giant marquee headline */
.marquee{
  position:absolute;top:16%;left:0;right:0;overflow:hidden;
  border-top:1px solid rgba(255,255,255,.16);border-bottom:1px solid rgba(255,255,255,.16);
  padding:4px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.mq-track{display:flex;width:max-content;animation:mq var(--mq-speed) linear infinite}
.mq-track span{
  font-size:clamp(56px,9.2vw,158px);line-height:.94;font-weight:500;
  letter-spacing:-.045em;white-space:nowrap;padding-right:.3em;
  color:rgba(233,239,246,.2);
  text-shadow:0 1px 0 rgba(255,255,255,.14);
}
.mq-track i{font-style:normal;font-size:.62em;vertical-align:.12em;opacity:.8}
@keyframes mq{to{transform:translateX(-50%)}}

/* Palco central: boneco 3D em cima, logotipo embaixo, empilhados de
   verdade (flex) — sem offsets mágicos que descolam em telas diferentes. */
#stage{
  position:absolute;top:var(--stage-top);left:50%;transform:translate(-50%,-50%);
  z-index:2;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;gap:clamp(8px,1.8vh,26px);
}
#mesh3d{
  display:block;
  width:calc(min(52vh,470px) * var(--mesh-scale));
  height:calc(min(58vh,520px) * var(--mesh-scale));
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.55));
  opacity:0;transition:opacity .7s var(--ease) .1s;
}
body.has-mesh #mesh3d{opacity:1}

/* Alternativa ao 3D: uma imagem parada, no mesmo lugar e no mesmo tamanho.
   Quem escolhe é o painel (Aparência > 3D da capa). */
#mesh-img{
  display:block;
  width:calc(min(52vh,470px) * var(--mesh-scale));
  height:calc(min(58vh,520px) * var(--mesh-scale));
  object-fit:contain;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.55));
}

/* chrome LB seal */
.chrome-mark{
  display:block;
  font-size:clamp(90px,13vw,190px);font-weight:700;letter-spacing:-.07em;
  background:linear-gradient(152deg,#fff 0%,#cfd7e1 12%,#78828f 26%,#fbfdff 40%,#5b6673 52%,#e3e9f0 66%,#8a94a2 80%,#f4f7fa 92%,#7c8794 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  opacity:var(--seal-opacity);filter:drop-shadow(0 6px 18px rgba(0,0,0,.5));
}
/* mesmo selo, agora com o logotipo em SVG. O gradiente cromado vem do
   <linearGradient id="chromeSeal"> no index.html, não do background-clip. */
.chrome-mark.is-logo{background:none;-webkit-background-clip:border-box;background-clip:border-box}
.chrome-mark.is-logo svg{
  display:block;width:clamp(140px,20vw,300px);height:auto;
  fill:url(#chromeSeal);
}
body.has-mesh .chrome-mark.is-logo svg{width:clamp(96px,12vw,180px)}

/* Assinatura abaixo do boneco, no mesmo cromado do resto. */
/* Assinatura chapada, de propósito. Gradiente em letra pequena vira borrão —
   e o busto já é a peça cromada da composição. Aqui o trabalho é ser legível
   e quieto, sobre a faixa clara das nuvens. */
.chrome-mark.is-word{
  background:none;-webkit-background-clip:border-box;background-clip:border-box;
  display:block;opacity:.88;
}
.chrome-mark .wm{display:block;width:clamp(200px,25vw,380px);height:auto;fill:#1d2632}

/* No desktop a apresentação mora no canto (#hint-br) e esta cópia fica fora
   do caminho. Ver o par no bloco de celular, mais abaixo. */
#stage-note{display:none}

@media (max-width:820px){
  /* No celular o 3D é a peça principal: sem a coluna de pastas competindo,
     ele pode ocupar o espaço que sobrou. Um pouco menor que antes, porque
     agora divide o palco com o texto de apresentação. */
  #mesh3d,#mesh-img{
    width:calc(min(42vh,330px) * var(--mesh-scale-m));
    height:calc(min(47vh,370px) * var(--mesh-scale-m));
  }
  .chrome-mark .wm{width:clamp(150px,48vw,230px)}

  /* A apresentação entra como terceiro andar do palco: 3D, assinatura,
     texto. Empilhado de verdade, então nunca encosta no boneco nem na dock,
     em qualquer altura de tela. */
  #stage-note{
    display:block;max-width:min(420px,calc(100vw - 44px));
    font-family:var(--mono);letter-spacing:.13em;text-transform:uppercase;
    color:rgba(255,255,255,.62);text-shadow:0 1px 3px rgba(0,0,0,.6);
    text-align:center;
  }
  #stage-note .rule{display:block;color:rgba(255,255,255,.72);margin-bottom:7px;font-size:8.5px}
  #stage-note i{font-style:normal;opacity:.5}
  #stage-note p{margin:0;line-height:1.62;font-size:9.2px;color:rgba(255,255,255,.88)}
  #stage-note b{color:#fff;background:rgba(255,255,255,.16);padding:0 3px}
}

/* ═══════════ MENU BAR ═══════════ */
#menubar{
  position:absolute;top:0;left:0;right:0;height:var(--mb);z-index:900;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 12px;
  background:rgba(10,12,16,.62);
  backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);
  border-bottom:1px solid rgba(255,255,255,.08);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:rgba(233,236,240,.78);
}
.mb-left,.mb-right{display:flex;align-items:center;gap:2px}
.mb-right{gap:12px}
.mb-apple{display:flex;align-items:center;padding:0 9px 0 3px;opacity:.9}
.mb-apple:hover{opacity:1}
.mb-item{padding:3px 9px;border-radius:4px;cursor:pointer;transition:background .12s}
.mb-item:hover{background:rgba(255,255,255,.13)}
.mb-strong{font-weight:700;letter-spacing:.13em}
.mb-status{display:flex;align-items:center;gap:6px;font-size:10px;color:rgba(233,236,240,.66)}
.mb-status .dot{width:7px;height:7px;border-radius:50%;background:var(--go);
  box-shadow:0 0 6px var(--go);flex:0 0 auto}
.mb-status:empty{display:none}
.mb-icn{display:flex;opacity:.7}
.mb-clock{font-variant-numeric:tabular-nums;letter-spacing:.06em}

/* seletor de idioma, no mesmo peso dos outros itens da barra */
.mb-lang{display:flex;align-items:center;gap:1px;margin-right:-4px}
.mb-lang button{
  font:inherit;font-size:9.5px;letter-spacing:.12em;
  padding:2px 6px;border-radius:4px;color:rgba(233,236,240,.5);
  transition:color .12s,background .12s;
}
.mb-lang button:hover{color:rgba(233,236,240,.9)}
.mb-lang button.is-on{color:#fff;background:rgba(255,255,255,.14)}
.mb-lang button:focus-visible{outline:1px solid rgba(255,255,255,.7);outline-offset:1px}
@media (max-width:820px){ .mb-lang button{padding:2px 4px} }

.mb-menu{
  position:absolute;top:calc(var(--mb) + 4px);left:8px;min-width:224px;z-index:950;
  background:rgba(20,24,29,.9);backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px);
  border:1px solid var(--line-2);border-radius:9px;padding:5px;
  box-shadow:0 18px 44px rgba(0,0,0,.6);
  font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  animation:pop .13s var(--ease);
}
@keyframes pop{from{opacity:0;transform:translateY(-5px)}}
.mb-menu button,.mb-menu a{
  display:block;width:100%;text-align:left;padding:7px 10px;border-radius:5px;
  text-decoration:none;color:var(--fg);
}
.mb-menu button:hover,.mb-menu a:hover{background:rgba(255,255,255,.13)}
.mb-menu hr{border:0;border-top:1px solid var(--line);margin:5px 8px}

/* ═══════════ DESKTOP ICONS ═══════════ */
#icons{
  position:absolute;top:calc(var(--mb) + var(--icons-top));right:var(--icons-right);z-index:100;
  display:flex;flex-direction:column;gap:var(--icons-gap);
}
.dicon{
  width:112px;padding:9px 5px 8px;border-radius:8px;
  display:flex;flex-direction:column;align-items:center;gap:7px;
  transition:background .12s;
}
.dicon:hover{background:rgba(255,255,255,.09)}
.dicon.sel{background:rgba(255,255,255,.16);outline:1px solid rgba(255,255,255,.22)}
.dicon-art{height:56px;display:grid;place-items:center;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5))}
.dicon-art .folder{width:62px;height:50px}
.dicon-art .doc{width:42px;height:53px}
.mailart{
  font-size:30px;line-height:1;width:52px;height:52px;display:grid;place-items:center;
  border-radius:12px;color:#0d1015;
  background:linear-gradient(150deg,#fff,#cbd3dd 22%,#8892a1 44%,#eef2f6 62%,#8d97a5 100%);
}
.dicon-label{
  font-family:var(--mono);font-size:10px;letter-spacing:.05em;line-height:1.32;
  text-align:center;color:#fff;
  padding:2px 5px;border-radius:4px;background:rgba(8,10,13,.5);
  text-shadow:0 1px 2px rgba(0,0,0,.7);
}
.dicon.sel .dicon-label{background:#2a3644}

/* ═══════════ DESKTOP MICRO-COPY ═══════════ */
#hint-bl,#hint-br{
  position:absolute;z-index:60;pointer-events:none;
  font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.62);text-shadow:0 1px 3px rgba(0,0,0,.6);
}
#hint-bl{left:var(--hint-side);bottom:var(--hint-bottom);display:flex;flex-direction:column;gap:3px}
#hint-bl .dim{color:rgba(255,255,255,.4)}
#hint-bl i{font-style:normal;opacity:.5;padding:0 2px}
/* right maior que o hint da esquerda de propósito: em tela baixa e larga a
   coluna de ícones desce até a altura deste texto, e sem essa folga as pastas
   ficam por cima das linhas. */
#hint-br{right:var(--hint-br-right);bottom:var(--hint-bottom);max-width:var(--hint-max);text-align:left}
#hint-br .rule{display:block;color:rgba(255,255,255,.72);margin-bottom:7px;font-size:9.5px}
#hint-br i{font-style:normal;opacity:.5}
#hint-br p{margin:0;line-height:1.62;font-size:9.8px;color:rgba(255,255,255,.88)}
#hint-br b{color:#fff;background:rgba(255,255,255,.16);padding:0 3px}
/* Os textos dos cantos somem quando uma janela abre. O boneco e a
   assinatura ficam: são a área de trabalho, não uma tela de espera. */
#desktop.busy #hint-bl,#desktop.busy #hint-br,
#desktop.busy #stage-note{opacity:0;transition:opacity .4s}

/* ═══════════ WINDOWS ═══════════ */
#windows{position:absolute;inset:0;z-index:200;pointer-events:none}
.window{pointer-events:auto}
.window{
  position:absolute;width:var(--w);height:var(--h);
  max-width:calc(100vw - 28px);max-height:calc(100vh - var(--mb) - 104px);
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--panel);
  border:1px solid var(--line-2);border-radius:var(--win-radius);
  box-shadow:0 34px 80px rgba(0,0,0,.62),0 4px 16px rgba(0,0,0,.5),
             inset 0 1px 0 rgba(255,255,255,.06);
  animation:winIn .22s var(--ease);
}
.window[hidden]{display:none}
@keyframes winIn{from{opacity:0;transform:scale(.965) translateY(10px)}}
.window.closing{animation:winOut .16s var(--ease) forwards}
@keyframes winOut{to{opacity:0;transform:scale(.965) translateY(8px)}}
.window.zoom{
  left:12px!important;top:calc(var(--mb) + 10px)!important;
  width:calc(100vw - 24px)!important;height:calc(100vh - var(--mb) - 108px)!important;
}

.titlebar{
  flex:0 0 40px;display:flex;align-items:center;gap:10px;padding:0 12px;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  border-bottom:1px solid var(--line);cursor:grab;user-select:none;
}
.titlebar:active{cursor:grabbing}
.lights{display:flex;gap:8px;flex:0 0 auto}
.lt{width:12px;height:12px;border-radius:50%;position:relative;transition:filter .12s}
.lt.close{background:#ff5f57}.lt.min{background:#febc2e}.lt.max{background:#28c840}
.window:not(.focus) .lt{background:#4a4f57}
.lt:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* Os símbolos apareciam só no hover do grupo. Aparecerem também quando a
   janela está em foco deixa claro que são botões, sem quebrar o visual. */
.window.focus .lights .lt::after,
.lights:hover .lt::after{
  content:'';position:absolute;inset:0;border-radius:50%;
  background-repeat:no-repeat;background-position:center;background-size:8px;
}
.window.focus .lt.close::after,.lights:hover .lt.close::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' stroke='%23730000' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M2.6 2.6l4.8 4.8M7.4 2.6l-4.8 4.8'/%3E%3C/svg%3E")}
.window.focus .lt.min::after,.lights:hover .lt.min::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' stroke='%237a4b00' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M2.4 5h5.2'/%3E%3C/svg%3E")}
.window.focus .lt.max::after,.lights:hover .lt.max::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' stroke='%230a5216' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M3 7l4-4M3.2 6.6V3.4h3.2'/%3E%3C/svg%3E")}
.title{
  flex:1;display:flex;align-items:center;gap:8px;justify-content:center;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(233,236,240,.72);
}
.window:not(.focus) .title{color:rgba(233,236,240,.36)}
.tbicon{width:17px;height:14px}.tbicon.doc{width:12px;height:15px}
.tb-right{flex:0 0 auto;min-width:64px;display:flex;justify-content:flex-end}
.tb-count{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
.tb-btn{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 10px;border:1px solid var(--line-2);border-radius:5px;color:var(--fg-2);
  transition:.12s;
}
.tb-btn:hover{background:rgba(255,255,255,.1);color:#fff}

.win-body{flex:1;min-height:0;display:flex}
.win-body.split{display:grid;grid-template-columns:230px 1fr}

/* ─── sidebar ─── */
.sidebar{
  border-right:1px solid var(--line);padding:16px 10px;overflow-y:auto;
  background:rgba(255,255,255,.018);
}
.sidebar.wide{padding:16px 8px}
.sb-label{
  margin:0 0 12px;padding:0 8px;
  font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--fg-3);
}
.sb-item{
  display:block;width:100%;text-align:left;padding:8px 10px;border-radius:6px;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  color:var(--fg-2);transition:.12s;margin-bottom:1px;
}
.sb-item:hover{background:rgba(255,255,255,.06);color:var(--fg)}
.sb-item.is-on{background:rgba(255,255,255,.11);color:#fff}
.sb-item>i{font-style:normal;color:var(--fg-3);margin-right:9px;font-size:10px;letter-spacing:.1em}
.sb-item.is-on>i{color:var(--go)}
.sb-item.mailrow{padding:10px;line-height:1.4}
.sb-item.mailrow b{
  display:block;font-family:var(--sans);font-size:12.5px;font-weight:500;
  letter-spacing:-.008em;color:var(--fg);margin-bottom:3px;
}
.sb-item.mailrow span{display:block;font-size:9.5px;letter-spacing:.05em;color:var(--fg-3)}
.sb-item.mailrow.is-on b{color:#fff}
.sb-item.mailrow.is-on span{color:var(--fg-2)}

/* ─── content ─── */
.content{overflow-y:auto;padding:36px 44px 60px;scroll-behavior:smooth}
.pane{display:none;max-width:70ch;animation:fade .22s var(--ease)}
.pane.is-on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}}

.content h1{
  margin:0 0 16px;font-size:clamp(27px,3.1vw,40px);line-height:1.06;
  font-weight:500;letter-spacing:-.035em;color:#fff;
}
.content h2{
  margin:38px 0 14px;padding-top:14px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:10px;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3);
}
.content h3{margin:0 0 4px;font-size:16px;font-weight:500;letter-spacing:-.012em;color:#fff}
.content p{margin:0 0 14px;font-size:15px;line-height:1.66;color:var(--fg-2)}
.content b,.content strong{color:var(--fg);font-weight:500}
.content em{font-style:italic;color:var(--fg)}
.content a{color:#fff;text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
.content a:hover{text-decoration-color:#fff}
.lede{font-size:18.5px!important;line-height:1.5!important;color:var(--fg)!important;letter-spacing:-.014em;margin-bottom:22px!important}
.muted{color:var(--fg-3)!important;font-size:13px!important}
.note{margin-top:30px!important;padding-top:16px;border-top:1px solid var(--line)}
.eyebrow{
  font-family:var(--mono)!important;font-size:9.5px!important;letter-spacing:.2em!important;
  text-transform:uppercase;color:var(--fg-3)!important;margin-bottom:12px!important;
}
.eyebrow::before{content:'● ';color:var(--go);font-size:.85em;vertical-align:.1em}
.postend{margin-top:30px!important;padding-top:16px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:10px!important;letter-spacing:.16em;color:var(--fg-3)!important}

/* hero */
.hero{display:flex;gap:22px;align-items:flex-start;margin-bottom:26px}
.avatar{
  width:112px;height:112px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  border:1px solid var(--line-2);filter:grayscale(.35) contrast(1.05);
}
.hero-sub{font-size:14px!important;line-height:1.55!important;margin-bottom:14px!important}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 9px;border:1px solid var(--line-2);border-radius:4px;color:var(--fg-2);
}
.chip-go{border-color:rgba(84,224,106,.38);color:#a8f0b3}
.chip-go::before{content:'● ';color:var(--go)}

.callout{
  margin:26px 0 0;padding:16px 18px;border:1px solid var(--line-2);border-radius:8px;
  background:rgba(255,255,255,.035);font-size:14px;line-height:1.6;color:var(--fg-2);
}
.callout b{color:#fff}

/* tick lists */
.ticks{list-style:none;margin:0 0 14px;padding:0}
.ticks li{
  position:relative;padding-left:22px;margin-bottom:12px;
  font-size:14.5px;line-height:1.62;color:var(--fg-2);
}
.ticks li::before{
  content:'';position:absolute;left:1px;top:.58em;width:5px;height:5px;
  border-radius:50%;background:var(--fg-3);
}

/* toolkit de downloads */
.dl-toolkit{margin-top:22px}
.dl-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:18px}
.dl-search{
  flex:1 1 200px;min-width:160px;padding:9px 12px;border-radius:7px;
  border:1px solid var(--line-2);background:rgba(255,255,255,.03);color:var(--fg);
  font-family:var(--sans);font-size:13.5px;
}
.dl-search::placeholder{color:var(--fg-3)}
.dl-search:focus{outline:none;border-color:var(--accent)}
.dl-filters{display:flex;flex-wrap:wrap;gap:6px}
.dl-pill{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  padding:7px 11px;border-radius:20px;border:1px solid var(--line-2);background:transparent;
  color:var(--fg-2);cursor:pointer;transition:border-color .15s,color .15s,background .15s;
}
.dl-pill:hover{border-color:var(--fg-3)}
.dl-pill.is-on{background:var(--accent);border-color:var(--accent);color:#0a0c10}

.dl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.dl-card{
  display:flex;flex-direction:column;border:1px solid var(--line);border-radius:9px;
  padding:16px 17px;background:rgba(255,255,255,.02);
}
.dl-card .eyebrow{margin-bottom:8px!important}
.dl-card h3{font-size:14px;margin-bottom:6px}
.dl-card p{font-size:12.8px!important;line-height:1.55!important;color:var(--fg-2)!important;
  flex:1;margin-bottom:12px!important}
.dl-meta{display:flex;gap:6px;margin-bottom:12px}
.dl-btn{
  align-self:flex-start;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  padding:8px 13px;border-radius:6px;border:1px solid var(--accent);color:#fff!important;
  text-decoration:none!important;transition:background .15s;
}
.dl-btn:hover{background:rgba(84,224,106,.14)}
.dl-btn i{font-style:normal}
.dl-empty{font-size:13px;color:var(--fg-3);padding:30px 0;text-align:center}
.dl-card[hidden]{display:none}

/* Chegou pelo link do material: o formulário de download abre por cima, e
   o card pisca atrás pra dizer qual material é. */
.dl-card.is-target{animation:dlAlvo 2.4s var(--ease)}
@keyframes dlAlvo{
  0%,60%{border-color:var(--accent);background:rgba(84,224,106,.07)}
  100%{border-color:var(--line);background:rgba(255,255,255,.02)}
}
@media (prefers-reduced-motion:reduce){
  .dl-card.is-target{animation:none;border-color:var(--accent)}
}

/* link para o site da empresa, no título do cargo */
.orglink{text-decoration:none;border-bottom:1px solid transparent}
.orglink:hover{border-bottom-color:currentColor}
.orglink i{font-style:normal;font-size:.78em;opacity:.55;margin-left:.22em}

/* ═══════════ IMAGENS DE CASE ═══════════ */
.shots{margin:0 0 22px;padding:0;display:grid;gap:14px}
.shots.pair{grid-template-columns:1fr 1fr}
.shot{display:block}
.shot img{
  display:block;width:100%;height:auto;border-radius:8px;
  border:1px solid var(--line);background:#0d0f13;
}
.shot-cap{
  display:block;margin-top:7px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--fg-3);
}
.content.paper .shot img{background:#f4f5f7;border-color:#dcdfe5}
.content.paper .shot-cap{color:#6b7280}
/* telas de celular lado a lado */
/* ─── carrossel ─── */
.shots .shot{
  display:block;width:100%;text-align:left;padding:0;border:0;background:none;
  cursor:zoom-in;position:relative;
}
.shots.carousel{display:block;position:relative}
.shots.carousel .car-stage{position:relative}
.shots.carousel .shot{display:none}
.shots.carousel .shot.is-on{display:block;animation:shotIn .22s var(--ease)}
@keyframes shotIn{from{opacity:0}}

.car-bar{
  display:flex;align-items:center;gap:10px;margin-top:10px;
  font-family:var(--mono);font-size:10px;color:var(--fg-3);
}
.car-nav{
  width:26px;height:26px;flex:0 0 auto;border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center;font-size:15px;line-height:1;color:var(--fg-2);
  transition:.14s;
}
.car-nav:hover{background:rgba(255,255,255,.09);border-color:var(--line-2);color:var(--fg)}
.car-dots{display:flex;gap:6px;flex:1 1 auto}
.car-dot{
  width:6px;height:6px;border-radius:50%;background:var(--line-2);padding:0;
  transition:.14s;
}
.car-dot.is-on{background:var(--fg-2);transform:scale(1.35)}
.car-count{flex:0 0 auto;letter-spacing:.1em;font-variant-numeric:tabular-nums}
.car-count b{color:var(--fg-2)}
.content.paper .car-nav{border-color:#dcdfe5;color:#4a5058}
.content.paper .car-nav:hover{background:rgba(0,0,0,.05)}
.content.paper .car-dot{background:#c8ccd3}
.content.paper .car-dot.is-on{background:#4a5058}

/* ─── vídeo ─── */
.video{margin:0 0 22px}
.video-frame{
  position:relative;aspect-ratio:16/9;width:100%;
  border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#0d0f13;
}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.video-play{
  position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;
  display:grid;place-items:center;cursor:pointer;background:#0d0f13;
}
.video-play img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.video-btn{
  position:relative;width:62px;height:62px;border-radius:50%;
  background:rgba(10,12,16,.62);border:1px solid rgba(255,255,255,.34);
  display:grid;place-items:center;transition:.16s;
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
}
.video-btn i{
  width:0;height:0;margin-left:4px;
  border-left:17px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent;
}
.video-play:hover .video-btn{background:rgba(10,12,16,.82);transform:scale(1.07)}
.video-play:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
@media (prefers-reduced-motion:reduce){ .video-play:hover .video-btn{transform:none} }
.video figcaption{
  display:block;margin-top:7px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--fg-3);
}
.content.paper .video-frame{background:#f4f5f7;border-color:#dcdfe5}
.content.paper .video figcaption{color:#6b7280}
@media print{ .video{display:none} }

/* ─── aviso de privacidade (sem cookie, sem analytics) ─── */
#privacy-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:8000;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px;
  padding:12px 18px;background:rgba(10,12,16,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line-2);
}
#privacy-bar p{margin:0;font-size:12px;line-height:1.5;color:var(--fg-2);max-width:64ch;text-align:center}
#privacy-bar button{
  flex:0 0 auto;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  padding:8px 14px;border-radius:6px;border:1px solid var(--accent);color:#fff;background:transparent;cursor:pointer;
}
#privacy-bar button:hover{background:rgba(84,224,106,.14)}

/* ─── modal de nome/e-mail antes do download ─── */
#dl-modal[hidden]{display:none}
#dl-modal{
  position:fixed;inset:0;z-index:9100;
  background:rgba(5,7,11,.93);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;padding:20px;
  animation:lbIn .18s var(--ease);
}
.dl-modal-box{
  position:relative;width:100%;max-width:380px;padding:26px 24px 22px;
  border-radius:12px;border:1px solid var(--line-2);background:var(--panel);
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.dl-modal-box .eyebrow{margin-bottom:8px!important}
.dl-modal-box h3{font-size:16px;margin-bottom:14px;line-height:1.35}
.dl-modal-box label{
  display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fg-3);margin-bottom:12px;
}
.dl-modal-box input{
  display:block;width:100%;margin-top:6px;padding:9px 11px;border-radius:7px;
  border:1px solid var(--line-2);background:rgba(255,255,255,.03);color:var(--fg);
  font-family:var(--sans);font-size:13.5px;text-transform:none;letter-spacing:normal;
}
.dl-modal-box input:focus{outline:none;border-color:var(--accent)}
.dl-modal-note{font-size:11.5px!important;color:var(--fg-3)!important;line-height:1.5!important;margin-bottom:14px!important}
.dl-modal-consent{
  display:flex;align-items:flex-start;gap:8px;margin-bottom:14px;cursor:pointer;
  font-family:var(--sans);font-size:12px;text-transform:none;letter-spacing:normal;
  color:var(--fg-2);line-height:1.45;
}
.dl-modal-consent input{width:15px;height:15px;flex:0 0 auto;margin-top:1px;accent-color:var(--accent)}
.dl-modal-error{font-size:12px!important;color:#f2a1a1!important;margin-bottom:10px!important}
.dl-modal-submit{width:100%;justify-content:center;cursor:pointer}
.dl-modal-submit:disabled{opacity:.5;cursor:default}
.dl-modal-close{
  position:absolute;top:12px;right:14px;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;font-size:13px;color:#e9ecf0;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);
}
.dl-modal-close:hover{background:rgba(255,255,255,.18)}

/* ─── ampliar ─── */
body.lb-open{overflow:hidden}
/* O atributo hidden esconde via display:none da folha do navegador — e
   qualquer display do autor vence isso. Sem esta linha a lupa continuava
   ocupando a tela inteira depois de fechada, engolindo todo clique. */
#lightbox[hidden]{display:none}
/* Mesma armadilha nas setas e na legenda: display do autor vence o hidden.
   Com uma imagem só, seta nenhuma aparece — não faz sentido sugerir que
   existe mais coisa pra ver. */
#lightbox [hidden]{display:none!important}
#lightbox{
  position:fixed;inset:0;z-index:9000;
  background:rgba(5,7,11,.93);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;gap:12px;padding:44px 62px;
  animation:lbIn .18s var(--ease);
}
@keyframes lbIn{from{opacity:0}}
.lb-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;
  max-width:100%;max-height:100%;min-width:0}
.lb-fig img{
  max-width:100%;max-height:calc(100vh - 130px);width:auto;height:auto;
  object-fit:contain;border-radius:8px;box-shadow:0 30px 80px rgba(0,0,0,.6);
  background:#0d0f13;
}
.lb-fig figcaption{
  font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(233,236,240,.66);text-align:center;max-width:70ch;
}
.lb-close{
  position:absolute;top:16px;right:20px;width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;font-size:15px;color:#e9ecf0;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);
}
.lb-nav{
  flex:0 0 auto;width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;font-size:24px;line-height:1;color:#e9ecf0;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);
}
.lb-close:hover,.lb-nav:hover{background:rgba(255,255,255,.18)}
@media (max-width:820px){
  #lightbox{padding:56px 12px 20px;flex-direction:column}
  .lb-nav{position:absolute;bottom:16px}
  .lb-prev{left:22%}.lb-next{right:22%}
}
@media (prefers-reduced-motion:reduce){
  .shots.carousel .shot.is-on,#lightbox{animation:none}
}

/* colunas iguais para a quantidade que houver — 3 telas não deixam buraco */
.shots.phones{grid-auto-flow:column;grid-auto-columns:1fr;grid-template-columns:none;gap:10px}
.shots.phones .shot img{border-radius:11px}
.shots.phones .shot-cap{font-size:8.5px;letter-spacing:.1em}
@media (max-width:820px){
  .shots.pair{grid-template-columns:1fr}
  .shots.phones{grid-auto-flow:row;grid-template-columns:repeat(2,1fr);grid-auto-columns:auto}
}

/* timeline */
.tl{list-style:none;margin:0;padding:0}
.tl li{padding:0 0 30px 0;border-top:1px solid var(--line);padding-top:20px}
.tl li:first-child{border-top:0;padding-top:0}
.tl-when{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-3);margin-bottom:7px;
}
.tl h3{font-size:17px;margin-bottom:3px}
.tl .at{color:var(--fg-2);font-weight:400}
.tl-meta{
  font-family:var(--mono);font-size:10px!important;letter-spacing:.08em;text-transform:uppercase;
  color:var(--fg-3)!important;margin-bottom:11px!important;
}
.tl-res{
  margin-top:12px!important;padding:10px 13px;border-left:2px solid var(--go);
  background:rgba(84,224,106,.05);font-size:13.5px!important;color:var(--fg-2)!important;
}
.tl-res b{color:#c9f5d1}
.tl-quiet h3,.tl-quiet .tl-when{color:var(--fg-3)}

/* cards */
.cardgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:8px}
.cardgrid.two{grid-template-columns:repeat(2,1fr)}
.card{border:1px solid var(--line);border-radius:8px;padding:16px 17px;background:rgba(255,255,255,.02)}
.card h3{font-size:13px;margin-bottom:10px}
.card-meta{font-family:var(--mono);font-size:9.5px!important;letter-spacing:.09em;
  text-transform:uppercase;color:var(--fg-3)!important;margin-bottom:9px!important}
.card p{font-size:13.5px!important;line-height:1.58!important}
.pills{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:5px}
.pills li{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;
  padding:4px 7px;border:1px solid var(--line);border-radius:3px;color:var(--fg-2);
}

/* certs */
.certgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 20px}
.cert{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding:9px 0;border-bottom:1px solid var(--line);
}
.cert b{font-size:12.5px;font-weight:500;color:var(--fg)}
.cert span{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--fg-3);white-space:nowrap}

/* quotes */
.quote{
  margin:0 0 22px;padding:20px 22px;border:1px solid var(--line);border-radius:9px;
  background:rgba(255,255,255,.022);
}
.quote p{font-size:15px!important;line-height:1.62!important;color:var(--fg)!important}
.quote footer{
  margin-top:14px;padding-top:12px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--fg-3);
}
.quote footer b{color:var(--fg-2)}

/* rodapé do depoimento: foto (ou iniciais) + quem é */
.q-foot{display:flex;align-items:center;gap:11px}
.q-face{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;overflow:hidden;
  display:grid;place-items:center;
  background:rgba(255,255,255,.06);border:1px solid var(--line);
  font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--fg-3);
}
.q-face img{width:100%;height:100%;object-fit:cover;display:block}
.q-who{display:flex;flex-direction:column;gap:2px;min-width:0}
.q-who b{color:var(--fg-2)}
.q-role,.q-org{display:block;letter-spacing:.09em}
.q-org{color:var(--fg-3)}
.content.paper .q-face{background:rgba(0,0,0,.05);border-color:#dcdfe5;color:#6b7280}

/* case list */
.caselist{display:flex;flex-direction:column;gap:0;margin-top:8px}
.casecard{
  display:flex;gap:20px;align-items:flex-start;text-align:left;width:100%;
  padding:22px 4px;border-top:1px solid var(--line);transition:.16s;
}
.casecard:last-child{border-bottom:1px solid var(--line)}
.casecard:hover{background:rgba(255,255,255,.035);padding-left:12px;padding-right:12px}
.cc-n{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--fg-3);
  flex:0 0 auto;padding-top:4px;
}
.cc-body{display:block;flex:1}
.cc-body b{display:block;font-size:19px;font-weight:500;letter-spacing:-.022em;color:#fff;margin-bottom:6px;line-height:1.22}
.cc-meta{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fg-3);margin-bottom:9px}
.cc-desc{display:block;font-size:14px;line-height:1.58;color:var(--fg-2);margin-bottom:12px}
.cc-kpis{display:flex;flex-wrap:wrap;gap:5px}
.cc-kpis i{
  font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 7px;border:1px solid var(--line-2);border-radius:3px;color:var(--fg-2);
}

/* case detail */
.factbar{
  display:grid;grid-template-columns:repeat(2,1fr);gap:0 22px;
  margin:22px 0 6px;
}
.factbar div{padding:10px 0;border-bottom:1px solid var(--line)}
.factbar b{
  display:block;font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-3);font-weight:400;margin-bottom:4px;
}
.factbar span{font-size:13px;color:var(--fg)}

.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:8px}
.kpi{border:1px solid var(--line);border-radius:8px;padding:16px 17px;background:rgba(255,255,255,.02)}
.kpi b{
  display:block;font-size:26px;font-weight:500;letter-spacing:-.035em;line-height:1;
  margin-bottom:8px;
  background:linear-gradient(150deg,#fff,#cdd5df 22%,#8d97a6 44%,#f2f6fa 62%,#8a94a2 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.kpi span{font-size:12.5px;line-height:1.5;color:var(--fg-2)}

/* ═══════════ CV (paper) ═══════════ */
.content.paper{
  background:var(--paper-bg);color:var(--paper-fg);max-width:none;padding:52px 60px 70px;
}
.content.paper .pane{max-width:none}
.content.paper h1{color:var(--paper-fg);font-size:32px;letter-spacing:-.035em;margin-bottom:6px}
.content.paper h2{
  color:#7b818c;border-top-color:rgba(0,0,0,.13);margin:28px 0 12px;
}
.content.paper h3{color:var(--paper-fg);font-size:14.5px}
.content.paper p{color:#3d434c;font-size:13.5px;line-height:1.62;margin-bottom:9px}
.content.paper b{color:var(--paper-fg)}
.content.paper a{color:var(--paper-fg);text-decoration-color:rgba(0,0,0,.3)}
.cv-head{padding-bottom:18px;border-bottom:2px solid var(--paper-fg);margin-bottom:6px}
.cv-role{font-family:var(--mono);font-size:11px!important;letter-spacing:.16em;
  text-transform:uppercase;color:#5a616b!important;margin-bottom:8px!important}
.cv-contact{font-size:12px!important;color:#5a616b!important;margin:0!important}
.cv-sec{max-width:74ch}
.cv-job{margin-bottom:18px}
.cv-when{font-family:var(--mono);font-size:9.5px!important;letter-spacing:.1em;
  text-transform:uppercase;color:#7b818c!important;margin-bottom:7px!important}
.cv-job ul{margin:0;padding-left:17px}
.cv-job li{font-size:13px;line-height:1.58;color:#3d434c;margin-bottom:5px}

/* ═══════════ MAIL ═══════════ */
.content.mail{padding:0;max-width:none}
.mailfield{
  display:flex;gap:12px;align-items:baseline;padding:12px 24px;border-bottom:1px solid var(--line);
  font-size:13.5px;color:var(--fg);
}
.mailfield>span:first-child{
  flex:0 0 62px;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-3);
}
.mailfield em{color:var(--fg-3);font-size:12.5px}
.mailbody{padding:26px 24px 40px}
.mailbody p{font-size:14.5px;line-height:1.68;color:var(--fg-2);margin-bottom:15px}
.mailsig{font-family:var(--mono);font-size:10px!important;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg-3)!important;margin-top:24px!important}
.linkgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 20px;margin-top:20px}
.lnk{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding:13px 0;border-top:1px solid var(--line);text-decoration:none!important;transition:.14s;
}
.lnk:hover{padding-left:8px;background:rgba(255,255,255,.04)}
.lnk.static{cursor:default}.lnk.static:hover{padding-left:0;background:none}
.lnk b{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-3);font-weight:400}
.lnk span{font-size:12.5px;color:var(--fg);text-align:right}

/* ═══════════ DOCK ═══════════ */
#dock{
  position:absolute;bottom:var(--dock-bottom);left:50%;transform:translateX(-50%);z-index:800;
  display:flex;align-items:flex-end;gap:8px;padding:8px 10px;
  background:rgba(16,19,23,.6);
  backdrop-filter:blur(26px) saturate(1.5);-webkit-backdrop-filter:blur(26px) saturate(1.5);
  border:1px solid rgba(255,255,255,.14);border-radius:17px;
  box-shadow:0 14px 40px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.1);
}
/* Cada pasta leva o nome embaixo do ícone, como na área de trabalho: um
   ícone de pasta sozinho não diz o que tem dentro, e o tooltip só aparecia
   depois de passar o mouse. E-mail e LinkedIn continuam só ícone — os dois
   já se explicam — e mantêm o tooltip no hover. */
.dk{
  position:relative;width:auto;min-width:46px;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  border-radius:11px;text-decoration:none;
}
/* O salto do hover é do ícone, não do conjunto: assim o nome fica parado
   embaixo em vez de crescer junto. */
.dk .folder,.dk .doc,.dk-em span{transition:transform .18s var(--ease)}
.dk:hover .folder,.dk:hover .doc,.dk:hover span{transform:translateY(-9px) scale(1.14)}
.dk .folder{width:40px;height:32px;filter:drop-shadow(0 2px 5px rgba(0,0,0,.5))}
.dk .doc{width:28px;height:35px;filter:drop-shadow(0 2px 5px rgba(0,0,0,.5))}
.dk-em span{
  width:46px;height:46px;display:grid;place-items:center;border-radius:11px;
  font-size:21px;color:#0d1015;font-weight:600;
  background:linear-gradient(150deg,#fff,#cbd3dd 22%,#8892a1 44%,#eef2f6 62%,#8d97a5 100%);
}
.dk-li span{font-family:var(--sans);font-size:19px;letter-spacing:-.04em}
.dk-sep{width:1px;height:34px;background:var(--line-2);margin:0 3px;align-self:center}
/* nome fixo embaixo da pasta */
.dk::after{
  content:attr(data-name);white-space:nowrap;
  font-family:var(--mono);font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;
  line-height:10px;min-height:10px;
  color:rgba(255,255,255,.78);text-shadow:0 1px 2px rgba(0,0,0,.6);
}
/* E-mail e LinkedIn não levam nome: os dois já se explicam, e nomear eles
   empurraria a dock pra fora da tela no celular. Sem nome embaixo sobra um
   vão, e reservar a linha vazia deixava os dois pendurados no alto com o
   buraco embaixo. Centralizados na altura da fileira, a folga se divide em
   cima e embaixo e o vão some. */
.dk-em,.dk-li{align-self:center}
.dk-em::after,.dk-li::after{
  content:attr(data-tip);position:absolute;bottom:calc(100% + 12px);left:50%;
  transform:translateX(-50%);white-space:nowrap;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  padding:5px 9px;border-radius:5px;background:rgba(22,26,31,.94);border:1px solid var(--line-2);
  color:var(--fg);opacity:0;pointer-events:none;transition:opacity .14s;
}
.dk-em:hover::after,.dk-li:hover::after{opacity:1}
/* O ponto de "janela aberta" desce pra baixo do nome, rente ao fim da dock:
   na folga entre o ícone e o texto ele encostava nas letras. */
.dk.running::before{
  content:'';position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;background:var(--go);
}

/* ═══════════ SCROLLBARS ═══════════ */
.content::-webkit-scrollbar,.sidebar::-webkit-scrollbar{width:9px}
.content::-webkit-scrollbar-thumb,.sidebar::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.16);border-radius:9px;border:2px solid transparent;background-clip:padding-box;
}
.content::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.3);background-clip:padding-box}
.content.paper::-webkit-scrollbar-thumb{background:rgba(0,0,0,.22);background-clip:padding-box}

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width:960px){
  .cardgrid,.cardgrid.two,.certgrid,.kpis,.factbar,.linkgrid{grid-template-columns:1fr}
  .content{padding:28px 26px 60px}
  .content.paper{padding:34px 28px 60px}
}
@media (max-width:820px){
  /* Pastas soltas na área de trabalho não fazem sentido em tela de toque:
     viram uma grade apertada disputando espaço com o 3D. A navegação fica
     na dock e no menu do topo, que já listam as mesmas seções. */
  #icons{display:none}
  #hint-bl{bottom:auto;top:calc(var(--mb) + 18px);left:16px}
  #hint-br{display:none}
  .marquee{top:9%}

  /* 86px é a dock com nome embaixo dos ícones (9px do fundo + 65px de altura)
     mais uma folga pra janela não encostar nela. */
  .window{
    left:0!important;top:var(--mb)!important;
    width:100vw!important;height:calc(100vh - var(--mb) - 86px)!important;
    max-width:100vw;max-height:none;border-radius:0;border-left:0;border-right:0;
  }
  .window.zoom{left:0!important;top:var(--mb)!important;width:100vw!important;height:calc(100vh - var(--mb) - 86px)!important}
  .titlebar{cursor:default}
  .win-body.split{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .sidebar{
    border-right:0;border-bottom:1px solid var(--line);
    display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;padding:10px;
  }
  .sb-label{display:none}
  .sidebar::-webkit-scrollbar{height:0;display:none}
  .sidebar{scrollbar-width:none}
  .sb-item{white-space:nowrap;flex:0 0 auto;width:auto;margin:0;padding:7px 12px;
    border:1px solid var(--line);border-radius:99px}
  .sb-item.mailrow{max-width:210px;border-radius:8px}
  .sb-item.mailrow b{white-space:normal;font-size:11.5px}
  .sb-item.mailrow span{display:none}
  .hero{flex-direction:column;gap:16px}
  .avatar{width:84px;height:84px}
  #dock{gap:5px;padding:6px 8px;bottom:9px;max-width:calc(100vw - 16px);overflow-x:auto}
  /* Sem as pastas na área de trabalho, a dock virou a navegação visível do
     celular. O aviso de privacidade fica por cima dela na primeira visita,
     então a dock sobe enquanto o aviso existir. */
  body:has(#privacy-bar) #dock{bottom:calc(9px + 132px)}
  /* 64ch de largura mínima no parágrafo empurrava a barra pra fora da tela,
     e com ela o resto do layout. No celular o texto usa a largura que tem. */
  #privacy-bar{padding:12px 14px;gap:10px}
  #privacy-bar p{max-width:100%;font-size:11.5px}
  .dk .folder{width:34px;height:27px}.dk .doc{width:24px;height:30px}
  .dk-em span{width:40px;height:40px;font-size:18px}
  .dk:hover .folder,.dk:hover .doc,.dk:hover span{transform:none}
  .dk{min-width:40px;gap:4px}
  .dk::after{
    font-size:7.5px;letter-spacing:.06em;line-height:9px;min-height:9px;
    color:rgba(255,255,255,.72);
  }
  /* Sem hover no celular o tooltip nunca apareceria, então some de vez. */
  .dk-em::after,.dk-li::after{content:none}
  .dk.running::before{bottom:-4px}
  .mb-left .mb-item{display:none}
  .mb-strong{display:inline-block!important}
  .mb-status{display:none}
}

/* Telefone estreito: a barra de menu tem itens decorativos (wifi, bateria) e
   itens que fazem algo (idioma, relógio). Quando não cabe tudo, o enfeite sai. */
@media (max-width:430px){
  #menubar{padding:0 8px}
  .mb-icn{display:none}
  .mb-right{gap:8px}
  .mb-clock{font-size:9.5px;letter-spacing:.03em}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ═══════════ PRINT (CV) ═══════════ */
/* O CV impresso é um documento à parte do site: cabe em duas páginas A4 e
   tem que parecer um CV, não uma captura de tela.
   Os seletores repetem .content.paper de propósito — as regras de tela usam
   essa especificidade, e sem igualar elas venceriam aqui. */
/* Margem zero de propósito: o Chrome desenha data, título, URL e número de
   página DENTRO da margem da página. Sem margem, não há onde desenhar, e eles
   somem sem depender de o usuário desmarcar nada no diálogo de impressão.
   A margem visual do CV vem do padding do conteúdo, logo abaixo. */
@page{ size:A4; margin:0; }

@media print{
  body{overflow:visible;background:#fff;color:#000}
  #menubar,#dock,#icons,#wallpaper,#stage,#hint-bl,#hint-br,#boot,
  .titlebar,.sidebar{display:none!important}
  #desktop,#windows{position:static;overflow:visible}
  .window{display:none}
  .window[data-win="cv"]{
    display:block!important;position:static!important;width:auto!important;height:auto!important;
    max-width:none!important;max-height:none!important;border:0;box-shadow:none;animation:none;
  }
  .win-body{display:block!important;overflow:visible!important;padding:0!important;background:#fff!important}
  .content.paper{
    display:block!important;overflow:visible!important;background:#fff!important;
    padding:14mm 15mm!important;
  }

  .content.paper{font-size:9.4pt;line-height:1.42;color:#000}
  .content.paper p{font-size:9.4pt;line-height:1.42;color:#000;margin:0 0 4.5pt;max-width:none}

  .content.paper .cv-head{margin:0 0 9pt;padding:0 0 7pt;border-bottom:.8pt solid #000}
  .content.paper .cv-head h1{font-size:19pt;line-height:1;margin:0 0 2pt;letter-spacing:-.02em;color:#000}
  .content.paper .cv-role{font-size:7.8pt!important;letter-spacing:.06em;margin:0 0 3pt;color:#000}
  .content.paper .cv-contact{font-size:8.8pt;margin:0;color:#000}

  .content.paper h2{
    font-size:8.4pt;letter-spacing:.12em;text-transform:uppercase;color:#000;
    margin:10pt 0 4.5pt;padding-bottom:1.6pt;border-bottom:.5pt solid #999;
    break-after:avoid;
  }
  .content.paper .cv-job{break-inside:avoid;margin:0 0 7.5pt}
  .content.paper .cv-job h3{font-size:10.4pt;margin:0 0 1.5pt;line-height:1.22;color:#000}
  .content.paper .cv-when{font-size:7.6pt!important;letter-spacing:.05em;margin:0 0 2.5pt;color:#333}
  .content.paper .cv-job ul{margin:0;padding-left:10pt}
  .content.paper .cv-job li{font-size:9.1pt;line-height:1.4;color:#000;margin:0 0 2.4pt}

  /* links viram texto: URL sublinhada num CV impresso polui */
  .content.paper a{color:#000;text-decoration:none}
  .orglink i{display:none}
}

/* ═══════════ MARKDOWN ═══════════ */
/* Só o que os blocos ainda não cobriam. Título, parágrafo e lista já herdam
   as regras de .content, então um post em markdown sai igual a um montado
   bloco a bloco. */
.content h4{
  margin:22px 0 6px;font-size:13.5px;font-weight:500;letter-spacing:-.01em;color:#fff;
}
.content.paper h4{color:var(--paper-fg)}
.content ol.ticks{counter-reset:mdo}
.content ol.ticks li{counter-increment:mdo}
.content ol.ticks.num li::before{
  content:counter(mdo);width:auto;height:auto;border-radius:0;background:none;
  top:0;left:0;font-family:var(--mono);font-size:11px;color:var(--fg-3);
}
.content.paper ol.ticks.num li::before{color:#8a919b}
.content hr.md-rule{
  border:0;border-top:1px solid var(--line);margin:26px 0;
}
.content.paper hr.md-rule{border-top-color:rgba(0,0,0,.13)}
.content code{
  font-family:var(--mono);font-size:.88em;padding:1px 5px;border-radius:4px;
  background:rgba(255,255,255,.08);color:var(--fg);
}
.content.paper code{background:rgba(0,0,0,.06);color:var(--paper-fg)}
.content .md-fig{margin:22px 0}
.content .md-fig img{
  display:block;width:100%;height:auto;border-radius:8px;
  border:1px solid var(--line);background:rgba(255,255,255,.03);
}
.content .md-fig figcaption{
  margin-top:8px;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fg-3);
}
.content.paper .md-fig img{background:#f4f5f7;border-color:#dcdfe5}
.content.paper .md-fig figcaption{color:#6b7280}