@font-face{font-family:"Retro Blendy";src:url("assets/RetroBlendy.otf") format("opentype");font-display:swap}
:root{
  --bg:#110d1c;--surface:#1a1429;--surface2:#211a33;--line:rgba(255,255,255,.09);
  --purple:#6e5aa7;--lilac:#b4a6f0;--cream:#f5f0e4;--muted:#b9b2cc;--lime:#ccf53b;--err:#ff8a73;
  --display:"Retro Blendy","Trebuchet MS",system-ui,sans-serif;
  --body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:90px;overflow-x:clip}
body{background:var(--bg);color:var(--cream);font:500 1rem/1.65 var(--body);overflow-x:clip;
  background-image:radial-gradient(900px 500px at 85% -5%,rgba(110,90,167,.35),transparent 70%),radial-gradient(700px 400px at -10% 40%,rgba(110,90,167,.14),transparent 70%)}
img,svg{display:block;max-width:100%}
a{color:inherit}ul,ol{list-style:none;padding:0}
:focus-visible{outline:3px solid var(--lime);outline-offset:3px;border-radius:8px}
.skip{position:absolute;left:-999px;top:8px;background:var(--lime);color:#222;padding:8px 14px;border-radius:8px;z-index:99}.skip:focus{left:12px}
.muted{color:var(--muted)}
h2{font:400 clamp(2rem,4.5vw,3rem)/1.05 var(--display);margin-bottom:28px}
h3{font:700 1.15rem/1.3 var(--body);margin-bottom:8px}

.nav{position:fixed;inset:14px 14px auto;z-index:50;max-width:1160px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 8px 8px 16px;border-radius:16px;background:rgba(26,20,41,.8);backdrop-filter:blur(14px);border:1px solid var(--line)}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font:1.35rem var(--display)}
.nav nav{display:flex;align-items:center;gap:2px}
.nav nav a:not(.btn){padding:8px 14px;border-radius:10px;text-decoration:none;font-weight:700;font-size:.92rem;color:var(--muted);transition:color .2s,background .2s}
.nav nav a:not(.btn):hover{color:var(--cream);background:rgba(255,255,255,.07)}
.btn{display:inline-block;padding:14px 26px;border-radius:12px;border:0;background:var(--lime);color:#1d1830;font:800 1rem var(--body);text-decoration:none;cursor:pointer;transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px -10px var(--lime)}
.btn.sm{padding:9px 18px;font-size:.92rem;margin-left:6px}
.btn.ghost{background:transparent;color:var(--cream);border:1.5px solid rgba(255,255,255,.25)}
.btn.ghost:hover{box-shadow:none;border-color:var(--lilac)}
.btn:disabled{opacity:.6;cursor:wait;transform:none}

.hero{max-width:1160px;margin:0 auto;padding:140px 24px 60px;min-height:92svh;display:grid;grid-template-columns:1.15fr .85fr;gap:30px;align-items:center}
.status{display:inline-flex;align-items:center;gap:10px;padding:6px 14px;border-radius:99px;background:var(--surface);border:1px solid var(--line);font-size:.88rem;font-weight:700;color:var(--muted)}
.status i{width:9px;height:9px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 4px rgba(204,245,59,.18)}
h1{font:400 clamp(4rem,10.5vw,8.5rem)/.9 var(--display);margin:22px 0 14px}
h1 span{display:inline-block;white-space:nowrap}
h1 .lil{color:var(--lilac)}
h1 .ch{display:inline-block}
.role{font-size:1.2rem;font-weight:800}
.lead{max-width:50ch;margin-top:12px;color:var(--muted);font-size:1.08rem}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

.stage{position:relative;display:grid;place-items:center;aspect-ratio:1/1.05;isolation:isolate}
.stage::before{content:"";position:absolute;z-index:-1;width:88%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(110,90,167,.6) 0%,rgba(110,90,167,.18) 45%,transparent 70%);filter:blur(10px)}
.stage::after{content:"";position:absolute;z-index:-1;width:62%;aspect-ratio:1;border-radius:50%;border:1.5px dashed rgba(180,166,240,.28);animation:spin 40s linear infinite}
.breathe{display:block;animation:breathe 4s ease-in-out infinite}
.breathe svg{transition:transform .15s ease-out;will-change:transform}
.ground{position:absolute;bottom:9%;left:50%;width:46%;height:6%;translate:-50% 0;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.5),transparent);animation:gshadow 4s ease-in-out infinite}
.mascot-btn.hop+.ground{animation:none;scale:.7}
.chip{position:absolute;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:12px;background:rgba(26,20,41,.72);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.14);font-weight:800;font-size:.85rem;box-shadow:0 12px 28px -14px #000;animation:bob 5s ease-in-out infinite}
.chip i{width:8px;height:8px;border-radius:50%;background:var(--lime)}
.chip.c1{top:8%;right:2%;animation-delay:-1s}.chip.c1 i{background:var(--lilac)}
.chip.c2{top:44%;right:-4%;animation-delay:-2.5s}.chip.c2 i{background:#ff8a73}
.chip.c3{bottom:16%;left:0;animation-delay:-.5s}
.chip.c4{top:48%;left:-6%;animation-delay:-3.5s}.chip.c4 i{background:#5cc8ff}
@keyframes breathe{50%{transform:translateY(-10px)}}
@keyframes gshadow{50%{scale:.82;opacity:.7}}
@keyframes spin{to{transform:rotate(360deg)}}
.mascot-btn{background:none;border:0;cursor:pointer;width:82%;padding:0;transform-origin:50% 100%;-webkit-tap-highlight-color:transparent}
.mascot-btn svg{width:100%;height:auto;filter:drop-shadow(0 16px 20px rgba(0,0,0,.4))}
.mascot-btn .eye,.mascot-btn .mouth{transition:transform .08s linear}
.mascot-btn.hop{animation:hop .6s cubic-bezier(.3,1.6,.5,1)}
.bubble{position:absolute;z-index:2;top:7%;left:6%;max-width:210px;padding:12px 16px;border:0;border-radius:16px 16px 16px 4px;background:var(--cream);color:#1d1830;font:1.15rem/1.15 var(--display);cursor:pointer;text-align:left;box-shadow:0 12px 30px -12px #000}

.facts{max-width:1160px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid var(--line)}
.facts div{padding:26px 20px;border-right:1px solid var(--line)}.facts div:last-child{border:0}
.facts b{display:block;font:400 2.1rem/1 var(--display);color:var(--lilac)}
.facts span{display:block;margin-top:6px;font-size:.9rem;color:var(--muted)}

.sec{max-width:1160px;margin:0 auto;padding:88px 24px 0}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:28px}
.split{display:grid;grid-template-columns:1.7fr 1fr;gap:20px}
.date{font-weight:800;font-size:.9rem;color:var(--lime);margin-bottom:4px}
.panel>h3{font-size:1.5rem}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.tags li{padding:5px 13px;border-radius:8px;background:var(--surface2);border:1px solid var(--line);font-size:.88rem;font-weight:700}
.langs{display:grid;gap:18px;margin-top:16px}
.langs li{display:grid;grid-template-columns:1fr auto;gap:6px 10px}
.langs span{font-weight:700}.langs b{color:var(--lime);font-size:.9rem}
.langs i{grid-column:1/-1;height:6px;border-radius:9px;background:var(--surface2);position:relative;overflow:hidden}
.langs i::after{content:"";position:absolute;inset:0;width:calc(var(--v)/6*100%);background:var(--lilac);border-radius:9px}

.timeline{position:relative;display:grid;gap:20px;padding-left:34px}
.timeline::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:2px;background:linear-gradient(var(--lilac),transparent)}
.timeline>li{position:relative;--c:var(--lime)}
.timeline>li:nth-child(2){--c:#ff8a73}.timeline>li:nth-child(3){--c:var(--lilac)}
.timeline>li::before{content:"";position:absolute;left:-34px;top:8px;width:16px;height:16px;border-radius:50%;background:var(--bg);border:3px solid var(--c)}
.timeline>li>.panel{border-top:3px solid var(--c)}
.timeline time{display:block;margin-bottom:8px;font:400 1.5rem/1 var(--display);color:var(--c)}
.timeline p{color:var(--muted)}
.link{display:inline-block;margin-top:16px;font-weight:800;color:var(--lilac);text-underline-offset:4px}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:44px}
.grid4 h3{color:var(--lilac)}.grid4 p{color:var(--muted);font-size:.95rem}

.band{display:grid;grid-template-columns:1fr 1.1fr;gap:32px;align-items:center;padding:40px;border-radius:28px;background:var(--cream);color:#1d1830}
.band h2{margin-bottom:12px}.band .muted{color:#4a4560}
.band .mt{margin-top:24px;color:var(--purple)}
.band .tags li{background:#1d1830;color:var(--cream);border:0}
.views{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;align-items:end}
.views button{background:none;border:0;color:inherit;cursor:pointer;display:grid;gap:8px;justify-items:center;font:700 .85rem var(--body);transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.views img{width:100%;height:auto;max-height:150px}
.views button.on{transform:scale(1.22) translateY(-6px)}

.contact{display:grid;grid-template-columns:1fr 1.15fr;gap:40px;align-items:start}
.contact h2{margin-bottom:14px}
.c-list{display:grid;gap:14px;margin-top:28px}
.c-list li{display:grid;grid-template-columns:96px 1fr;font-weight:700}
.c-list span{color:var(--muted);font-weight:600}
.c-list a{text-underline-offset:4px;text-decoration-color:var(--lilac)}.c-list a:hover{color:var(--lime)}
.form{display:grid;gap:16px;padding:32px;background:var(--surface2)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
label{display:grid;gap:6px;font-weight:700;font-size:.9rem}
input,select,textarea{width:100%;padding:12px 14px;border-radius:10px;border:1.5px solid rgba(255,255,255,.14);background:var(--bg);color:var(--cream);font:500 1rem var(--body);color-scheme:dark}
textarea{resize:vertical;min-height:84px}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--lime);box-shadow:0 0 0 3px rgba(204,245,59,.18)}
select:disabled{opacity:.55}
label small,.cerr{min-height:0;color:var(--err);font-weight:600;font-size:.8rem}
label.bad input,label.bad select{border-color:var(--err)}
.check{grid-template-columns:auto 1fr;align-items:start;gap:10px;font-weight:500;color:var(--muted)}
.check input{width:18px;height:18px;margin-top:3px;accent-color:var(--lime)}
.hp{position:absolute;left:-9999px;opacity:0;height:0}
.msg{font-weight:700}.msg.ok{color:var(--lime)}.msg.no{color:var(--err)}
.foot{margin-top:100px;padding:30px 24px;text-align:center;border-top:1px solid var(--line);color:var(--muted);font-size:.9rem}

@keyframes pop{from{opacity:0;transform:translateY(.4em) scale(.7)}to{opacity:1;transform:none}}
@keyframes hop{0%{transform:scale(1)}30%{transform:scale(1.07,.92)}60%{transform:translateY(-22px)}100%{transform:none}}
.js h1 .ch{opacity:0;animation:pop .55s cubic-bezier(.3,1.5,.5,1) forwards;animation-delay:calc(var(--i)*60ms + 120ms)}
.js .mascot-btn{animation:hop .7s .8s cubic-bezier(.3,1.6,.5,1) backwards}

@media (max-width:900px){
  .hero,.split,.grid3,.band,.contact{grid-template-columns:1fr}
  .hero{padding-top:110px}.stage{aspect-ratio:1/.9}
  .facts,.grid4{grid-template-columns:1fr 1fr}.facts div:nth-child(2){border-right:0}.facts div:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media (max-width:600px){
  .nav nav a:not(.btn){display:none}
  .row{grid-template-columns:1fr}.grid4{grid-template-columns:1fr}.band,.form{padding:24px}.views{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.js h1 .ch{opacity:1}}

/* --- v3: mais criativo --- */
h2::before{content:"✦";color:var(--lime);font-size:.45em;margin-right:.5em;vertical-align:.55em}
.rot{display:inline-block;color:var(--lime);border-right:3px solid var(--lime);padding-right:4px;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{border-color:transparent}}
.marquee{overflow:hidden;border-block:1px solid var(--line);background:var(--surface);transform:rotate(-1.2deg);margin:20px -20px 38px;padding:16px 0}
.track{display:flex;width:max-content;animation:slide 32s linear infinite}
.track span{font:1.6rem var(--display);padding:0 28px;white-space:nowrap;color:var(--cream)}
.track span::after{content:"✦";color:var(--lilac);margin-left:56px}
.track span:nth-child(3n){color:var(--lilac)}
@keyframes slide{to{transform:translateX(-50%)}}
.panel{background:radial-gradient(360px circle at var(--mx,50%) var(--my,-30%),rgba(180,166,240,.14),transparent 65%),var(--surface);transition:border-color .25s,transform .25s}
.panel:hover{border-color:rgba(180,166,240,.35)}
.form.panel{background:radial-gradient(360px circle at var(--mx,50%) var(--my,-30%),rgba(204,245,59,.07),transparent 65%),var(--surface2)}
.timeline>li>.panel:hover{transform:translateX(6px)}
.grid3 .panel:hover{transform:translateY(-4px)}
.done{display:grid;justify-items:center;text-align:center;gap:12px;padding:44px 32px;background:var(--surface2)}
.done[hidden]{display:none}
.done img{animation:bob 2.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8px) rotate(4deg)}}
.guide{position:fixed;right:18px;bottom:18px;z-index:40;display:flex;align-items:center;gap:10px;max-width:290px;padding:8px 18px 8px 8px;border-radius:99px;background:var(--cream);color:#1d1830;box-shadow:0 14px 34px -12px #000;font-weight:800;font-size:.9rem;line-height:1.25;cursor:pointer;transition:transform .35s cubic-bezier(.3,1.5,.5,1),opacity .3s}
.guide img{flex:none;border-radius:50%;background:#6e5aa7;padding:4px}
.guide.hide{transform:translateY(90px);opacity:0;pointer-events:none}
@media (max-width:700px){.guide p{display:none}.guide{padding:6px}}
@media (prefers-reduced-motion:reduce){.track,.rot,.done img{animation:none!important}}
[hidden]{display:none!important}

@media (max-width:700px){.chip.c2,.chip.c4{display:none}.chip{font-size:.75rem;padding:6px 10px}}
@media (prefers-reduced-motion:reduce){.stage::after,.breathe,.ground,.chip{animation:none!important}}

/* --- Projetos --- */
.ptags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.ptags button{font:800 .9rem var(--body);color:var(--cream);background:transparent;border:1.5px solid rgba(255,255,255,.22);border-radius:10px;padding:7px 16px;cursor:pointer;transition:background .2s,border-color .2s}
.ptags button:hover{border-color:var(--lilac)}
.ptags button[aria-pressed="true"]{background:var(--lime);border-color:var(--lime);color:#1d1830}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.pgrid>.muted{grid-column:1/-1;padding:34px;border:1.5px dashed var(--line);border-radius:20px;text-align:center}
.pcard{display:flex;flex-direction:column;padding:0;overflow:hidden;text-align:left;color:inherit;font:inherit;cursor:pointer;background:var(--surface);border:1px solid var(--line);border-radius:20px;transition:transform .3s,border-color .3s}
.pcard:hover{transform:translateY(-6px);border-color:rgba(180,166,240,.4)}
.pcard .cv{aspect-ratio:16/10;overflow:hidden;background:var(--surface2);position:relative}
.pcard .cv img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.pcard:hover .cv img{transform:scale(1.06)}
.pcard .cv.none{display:grid;place-items:center}.pcard .cv.none img{width:38%;height:auto;object-fit:contain;opacity:.9}
.pcard .bd{padding:18px 20px 20px;display:grid;gap:8px}
.pcard h3{margin:0;font-size:1.2rem}
.pcard p{color:var(--muted);font-size:.93rem}
.pcard .mini{display:flex;flex-wrap:wrap;gap:6px}.pcard .mini span{font-size:.75rem;font-weight:800;padding:3px 10px;border-radius:8px;background:var(--surface2);border:1px solid var(--line)}
.pcard .dl{position:absolute;top:12px;right:12px;padding:5px 11px;border-radius:99px;background:var(--lime);color:#1d1830;font-size:.75rem;font-weight:800}
.pm{border:0;padding:0;border-radius:24px;background:var(--surface);color:var(--cream);width:min(960px,94vw);max-height:92vh;overflow:auto;margin:auto}
.pm::backdrop{background:rgba(8,5,16,.82);backdrop-filter:blur(6px)}
.pm[open]{animation:pmin .3s cubic-bezier(.3,1.3,.5,1)}
@keyframes pmin{from{opacity:0;transform:translateY(16px) scale(.97)}}
.pm-x{position:absolute;top:12px;right:12px;z-index:3;width:40px;height:40px;border-radius:50%;border:0;background:rgba(17,13,28,.8);color:var(--cream);font-size:1.5rem;line-height:1;cursor:pointer}
.pm-gal{position:relative;background:#0b0813;display:grid;place-items:center;min-height:200px}
.pm-gal img{max-width:100%;max-height:46vh;object-fit:contain;display:block}
.pm-gal.empty{display:none}
.pm-n{position:absolute;top:50%;translate:0 -50%;width:42px;height:42px;border-radius:50%;border:0;background:rgba(17,13,28,.8);color:var(--cream);font-size:1.6rem;cursor:pointer}
.pm-n.prev{left:12px}.pm-n.next{right:12px}.pm-gal.one .pm-n{display:none}
.pm-th{display:flex;gap:8px;padding:10px 14px;overflow-x:auto;background:#0b0813}
.pm-th:empty{display:none}
.pm-th button{flex:none;width:76px;height:52px;padding:0;border:2px solid transparent;border-radius:8px;overflow:hidden;cursor:pointer;opacity:.6;background:none}
.pm-th button[aria-current="true"]{border-color:var(--lime);opacity:1}
.pm-th img{width:100%;height:100%;object-fit:cover;display:block}
.pm-info{padding:26px 30px 30px;display:grid;gap:12px}
.pm-info h3{font:400 2rem/1.1 var(--display);margin:0}
.pm-info p{white-space:pre-line;color:var(--muted)}
.pm-act{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px;align-items:center}
.pm-act small{color:var(--muted)}
@media (max-width:600px){.pm-info{padding:20px}.pm-info h3{font-size:1.6rem}}
@media (prefers-reduced-motion:reduce){.pm[open]{animation:none}}