/* Catppuccin Latte */
:root{
  --base:#eff1f5; --mantle:#e6e9ef; --crust:#dce0e8;
  --surface0:#ccd0da; --surface1:#bcc0cc; --surface2:#acb0be;
  --overlay0:#9ca0b0; --overlay1:#8c8fa1;
  --subtext0:#6c6f85; --subtext1:#5c5f77; --text:#4c4f69;
  --rosewater:#dc8a78; --flamingo:#dd7878; --pink:#ea76cb; --mauve:#8839ef;
  --red:#d20f39; --maroon:#e64553; --peach:#fe640b; --yellow:#df8e1d;
  --green:#40a02b; --teal:#179299; --sky:#04a5e5; --sapphire:#209fb5;
  --blue:#1e66f5; --lavender:#7287fd;
  color-scheme:light;
}

/* Catppuccin Mocha. ponytail: mesmos tokens, outros valores — o resto do CSS
   nao sabe que existe tema. Light e o padrao; so troca com escolha explicita,
   sem prefers-color-scheme. */
:root[data-theme="dark"]{
  --base:#1e1e2e; --mantle:#181825; --crust:#11111b;
  --surface0:#313244; --surface1:#45475a; --surface2:#585b70;
  --overlay0:#6c7086; --overlay1:#7f849c;
  --subtext0:#a6adc8; --subtext1:#bac2de; --text:#cdd6f4;
  --rosewater:#f5e0dc; --flamingo:#f2cdcd; --pink:#f5c2e7; --mauve:#cba6f7;
  --red:#f38ba8; --maroon:#eba0ac; --peach:#fab387; --yellow:#f9e2af;
  --green:#a6e3a1; --teal:#94e2d5; --sky:#89dceb; --sapphire:#74c7ec;
  --blue:#89b4fa; --lavender:#b4befe;
  color-scheme:dark;
}
*{box-sizing:border-box}
/* regra de autor com display vence o [hidden] do UA stylesheet; o JS usa .hidden */
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--base); color:var(--text);
  font:16px/1.65 ui-sans-serif,-apple-system,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--blue); text-decoration:none}
a:hover{text-decoration:underline}

.wrap{max-width:820px; margin:0 auto; padding:0 20px}
main{padding-bottom:3rem}
section{padding-block:2.5rem}
section + section{border-top:1px solid var(--crust)}

h1{font-size:2rem; line-height:1.2; margin:0 0 .35rem; letter-spacing:-.02em}
h2{font-size:.8rem; text-transform:uppercase; letter-spacing:.12em;
   color:var(--accent,var(--overlay1)); margin:0 0 1.5rem; font-weight:600;
   display:flex; align-items:center; gap:.6rem}
h2::after{content:""; flex:1; height:1px; background:currentColor; opacity:.25}
h3{font-size:1.05rem; margin:0 0 .15rem; font-weight:600}
.timeline > li > h3{font-size:1.25rem; letter-spacing:-.01em}
p{margin:0 0 1rem}
ul{margin:.6rem 0 0; padding-left:1.15rem}
li{margin-bottom:.4rem; color:var(--subtext1)}
li::marker{color:var(--surface2)}
.timeline > li > ul{list-style:disc}
li strong{color:var(--text); font-weight:600}
.timeline li::marker{color:color-mix(in srgb,var(--accent) 55%,transparent)}

/* ---- header ---- */
header{background:var(--mantle); border-bottom:1px solid var(--crust);
  padding-block:2.5rem}

/* ---- menu superior ---- */
.topbar{position:sticky; top:0; z-index:10; background:color-mix(in srgb,var(--base) 85%,transparent);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--crust)}
.topbar .wrap{display:flex; align-items:center; gap:1.25rem; min-height:3rem}
.topbar nav{display:flex; gap:1.25rem}
.topbar nav a{font-size:.9rem; font-weight:500; color:var(--subtext0); padding-block:.9rem}
.topbar nav a:hover{color:var(--text); text-decoration:none}
.topbar nav a[aria-current]{color:var(--blue); box-shadow:inset 0 -2px 0 var(--blue)}
.topbar .lang{margin-left:auto}
.lang{display:flex; border:1px solid var(--surface0); border-radius:8px;
  overflow:hidden; background:var(--base)}
.lang button{appearance:none; border:0; background:none; cursor:pointer; font:inherit;
  font-size:.78rem; font-weight:600; letter-spacing:.03em; padding:.3rem .6rem;
  color:var(--overlay1); transition:background .15s ease, color .15s ease}
.lang button:hover{color:var(--text)}
.lang button[aria-pressed="true"]{background:var(--blue); color:var(--base)}
.lang button:focus-visible{outline:2px solid var(--blue); outline-offset:-2px}
.role{color:var(--subtext0); font-size:1.05rem; margin:0 0 .75rem}
.meta{font-size:.9rem; color:var(--subtext0); margin:0 0 1rem}
.langs{display:flex; flex-wrap:wrap; justify-content:space-between;
  gap:.5rem 1.25rem; list-style:none; margin:0 0 1.5rem; padding:0; font-size:.88rem}
.langs li{display:flex; align-items:center; gap:.45rem; margin:0; color:var(--subtext0)}
.langs li::before{content:""; width:7px; height:7px; border-radius:50%;
  background:var(--accent); flex:none}
.langs b{color:var(--text); font-weight:600}
.links{display:flex; flex-wrap:wrap; gap:.6rem}
.links a{
  display:inline-flex; align-items:center; gap:.45rem;
  border:1px solid var(--surface0); background:var(--base); border-radius:8px;
  padding:.4rem .85rem; font-size:.9rem; font-weight:500; color:var(--text);
}
.links svg{width:15px; height:15px; flex:none}
.links a{color:var(--accent)}
.links a:hover{border-color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,var(--base));
  text-decoration:none}

/* ---- timeline ---- */
.timeline{position:relative; margin:0; padding:0 0 0 1.75rem; list-style:none}
.timeline::before{
  content:""; position:absolute; left:5px; top:.5rem; bottom:.5rem; width:2px;
  background:linear-gradient(var(--blue),var(--mauve),var(--teal),var(--green));
  opacity:.35;
}
.timeline > li{position:relative; padding-bottom:2.25rem}
.timeline > li:last-child{padding-bottom:0}
.timeline > li::before{
  content:""; position:absolute; left:-1.75rem; top:.45rem;
  width:12px; height:12px; border-radius:50%;
  background:var(--base); border:2px solid var(--surface2);
  transition:background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.timeline > li.in::before{background:var(--accent); border-color:var(--accent)}
.timeline > li.current.in::before{box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 20%,transparent)}

.when{font-size:.82rem; color:var(--overlay1); font-variant-numeric:tabular-nums;
      text-transform:uppercase; letter-spacing:.05em; margin-bottom:.35rem}
.timeline > li .when{color:var(--accent); opacity:.9}

.roles{list-style:none; margin:1.1rem 0 0; padding:0 0 0 1.1rem;
  border-left:2px solid color-mix(in srgb,var(--accent) 22%,transparent)}
.roles > li{position:relative; padding-bottom:1.75rem}
.roles > li:last-child{padding-bottom:0}
.roles > li::before{content:""; position:absolute; left:calc(-1.1rem - 4px); top:.5rem;
  width:6px; height:6px; border-radius:50%; background:var(--accent); opacity:.55}
.roles h4{margin:0 0 .15rem; font-size:1rem; font-weight:600; color:var(--text)}
.role-meta{margin:0; font-size:.85rem; color:var(--overlay1)}
.where{color:var(--subtext0); font-size:.95rem; margin:0}
.where b{color:var(--accent,var(--teal)); font-weight:600}

/* ---- badges ---- */
.tech h4{margin:1.4rem 0 .5rem; font-size:.85rem; font-weight:600; color:var(--accent)}
.tech h4:first-child{margin-top:0}
.badges{display:flex; flex-wrap:wrap; gap:.35rem; margin:0}
.pill{display:inline-flex; align-items:center; gap:.35rem; border-radius:5px;
  background:var(--accent); color:var(--base); padding:.2rem .5rem;
  font-size:.79rem; font-weight:500; line-height:1.45; white-space:nowrap}
.pill svg{width:12px; height:12px; fill:currentColor; flex:none; overflow:visible}
.badges.stack{margin:.9rem 0 0; gap:.3rem}
.badges.stack .pill{font-size:.75rem; padding:.15rem .42rem}

/* ---- grid blocks ---- */
.cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.5rem}
.cert{margin:0; padding:0; list-style:none}
.cert li{padding-left:1.1rem; position:relative}
.cert li::before{content:"▪"; position:absolute; left:0; color:var(--accent)}

/* reveal */
.timeline > li{opacity:0; transform:translateY(12px); transition:opacity .5s ease, transform .5s ease}
.timeline > li.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .timeline > li{opacity:1; transform:none; transition:none}
}
@media print{
  :root[data-theme="dark"]{
    --base:#fff; --mantle:#fff; --crust:#dce0e8; --surface0:#ccd0da;
    --overlay0:#9ca0b0; --overlay1:#8c8fa1;
    --subtext0:#6c6f85; --subtext1:#5c5f77; --text:#4c4f69;
    --rosewater:#dc8a78; --flamingo:#dd7878; --pink:#ea76cb; --mauve:#8839ef;
    --red:#d20f39; --maroon:#e64553; --peach:#fe640b; --yellow:#df8e1d;
    --green:#40a02b; --teal:#179299; --sky:#04a5e5; --sapphire:#209fb5;
    --blue:#1e66f5; --lavender:#7287fd;
    color-scheme:light;
  }
  .topbar{display:none}
  header{background:#fff}
  .timeline > li{opacity:1; transform:none}
  section{page-break-inside:avoid}
}

/* ---- blog ---- */
header h1 a{color:inherit; text-decoration:none}
.post-list{list-style:none; margin:0; padding:0}
.post-list > li{margin:0; padding-block:0 1.75rem; border-bottom:1px solid var(--crust); color:inherit}
/* :first-child/:last-child mentem aqui: listaDePosts() esconde os posts do outro
   idioma, entao o primeiro (ou ultimo) do DOM pode nao ser o que esta na tela.
   Espaco e borda tem que olhar pros irmaos visiveis, nao pra posicao no DOM. */
.post-list > li:not([hidden]) ~ li:not([hidden]){padding-top:1.75rem}
.post-list > li:not(:has(~ li:not([hidden]))){border-bottom:0}
.post-list h3{font-size:1.25rem; letter-spacing:-.01em; margin-bottom:.3rem}
.post-list h3 a{color:var(--text)}
.post-list h3 a:hover{color:var(--accent); text-decoration:none}
.post-list .when,.post .when{color:var(--accent); opacity:.9}

/* o header e uma faixa colorida; sem isso a data cola nela nas duas paginas */
.post-list,.post{padding-top:2.25rem}
/* bloco de metadados marcado pelo accent. ponytail: o titulo fica em --text —
   sapphire puro no Latte da 2.75:1 no fundo --base, abaixo do 3:1 que a WCAG
   pede ate pra texto grande; quem carrega a cor e a barra, que nao se le. */
.post-head{border-left:3px solid var(--accent); padding-left:1.1rem; margin-bottom:1.8rem}
.post-head .when{font-size:.85rem; margin-bottom:.35rem}
.post-head .badges{margin-top:.7rem}
.post .post-title{font-size:1.9rem; line-height:1.25; letter-spacing:-.02em;
  text-transform:none; color:var(--text); margin:0; font-weight:600; display:block}
.post .post-title::after{content:none}

/* conteúdo do markdown: o h2 do CV é um rótulo, aqui é título de verdade */
.prose{color:var(--subtext1)}
.prose h2,.prose h3,.prose h4{color:var(--text); text-transform:none; letter-spacing:-.01em;
  display:block; font-weight:600}
.prose h2{font-size:1.35rem; margin:2.2rem 0 .6rem}
.prose h2::after{content:none}
.prose h3{font-size:1.1rem; margin:1.8rem 0 .5rem}
.prose ul,.prose ol{margin:.6rem 0 1rem}
.prose img{max-width:100%; height:auto; border-radius:8px}
.prose blockquote{margin:1.2rem 0; padding:.2rem 0 .2rem 1rem; color:var(--subtext0);
  border-left:3px solid color-mix(in srgb,var(--accent) 40%,transparent)}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.88em;
  background:var(--mantle); border:1px solid var(--crust); border-radius:4px; padding:.1em .35em}
.prose pre{background:var(--mantle); border:1px solid var(--crust); border-radius:8px;
  padding:1rem; overflow-x:auto; line-height:1.5}
.prose pre code{background:none; border:0; padding:0; font-size:.85rem}
.prose table{width:100%; border-collapse:collapse; margin:1.2rem 0; font-size:.92rem}
.prose th,.prose td{text-align:left; padding:.5rem .7rem; border-bottom:1px solid var(--crust)}
.prose th{color:var(--text); font-weight:600}
.prose hr{border:0; border-top:1px solid var(--crust); margin:2rem 0}

.post-back{margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--crust); font-size:.9rem}

/* rouge -> Catppuccin Latte. ponytail: só os tokens que aparecem de verdade. */
.prose .highlight{background:none}
.prose .c,.prose .c1,.prose .cm,.prose .cd{color:var(--overlay1); font-style:italic}
.prose .k,.prose .kd,.prose .kn,.prose .kp,.prose .kr,.prose .kt,.prose .kc{color:var(--mauve)}
.prose .o,.prose .ow,.prose .pi{color:var(--sky)}
.prose .s,.prose .s1,.prose .s2,.prose .sb,.prose .sc,.prose .sr,.prose .se{color:var(--green)}
.prose .m,.prose .mi,.prose .mf,.prose .mh,.prose .il{color:var(--peach)}
.prose .n,.prose .nv,.prose .nb,.prose .py{color:var(--text)}
.prose .nf,.prose .nd{color:var(--blue)}
.prose .nc,.prose .nn,.prose .no{color:var(--yellow)}
.prose .na,.prose .nt{color:var(--teal)}
.prose .gs{font-weight:600}
.prose .ge{font-style:italic}
.prose .gd{color:var(--red)}
.prose .gi{color:var(--green)}
.prose .err{color:var(--red)}
.topbar .feed{margin-left:auto; display:inline-flex; align-items:center; gap:.35rem;
  font-size:.82rem; font-weight:500; color:var(--peach)}
.topbar .feed svg{width:14px; height:14px}
.lang a{display:inline-flex; align-items:center; font-size:.78rem; font-weight:600;
  letter-spacing:.03em; padding:.3rem .6rem; color:var(--overlay1)}
.lang a:hover{color:var(--text); text-decoration:none}
.lang a[aria-current]{background:var(--blue); color:var(--base)}
.lang-tag{display:inline-flex; align-items:center; border:1px solid var(--surface1);
  border-radius:4px; padding:0 .3rem; font-size:.62rem; font-weight:700;
  letter-spacing:.06em; color:var(--overlay1); vertical-align:middle}

/* ---- alternador de tema ---- */
.acoes{margin-left:auto; display:flex; align-items:center; gap:.6rem}
.tema{appearance:none; display:grid; place-items:center; cursor:pointer;
  width:2rem; height:2rem; padding:0; border:1px solid var(--surface0);
  border-radius:8px; background:var(--base); color:var(--yellow);
  transition:border-color .2s ease, color .2s ease}
.tema:hover{border-color:var(--accent,var(--yellow))}
.tema:focus-visible{outline:2px solid var(--blue); outline-offset:2px}
:root[data-theme="dark"] .tema{color:var(--lavender)}

.tema svg{width:17px; height:17px; overflow:visible;
  transition:transform .5s cubic-bezier(.3,1.4,.5,1)}
/* sol e lua tem o mesmo disco; muda so onde a mordida esta */
.tema .recorte{transition:transform .5s cubic-bezier(.3,1.4,.5,1)}
.tema .raios{transform-box:fill-box; transform-origin:center;
  transition:transform .5s cubic-bezier(.3,1.4,.5,1), opacity .3s ease}

:root:not([data-theme="dark"]) .tema .recorte{transform:translate(13px,-13px)}
:root[data-theme="dark"] .tema svg{transform:rotate(22deg)}
:root[data-theme="dark"] .tema .raios{transform:rotate(45deg) scale(.3); opacity:0}

@media (prefers-reduced-motion:reduce){
  .tema svg,.tema .recorte,.tema .raios{transition:none}
}