/* ============================================================
   PORTFÓLIO — eng. mecânica × tecnologia
   Sistema: carbono #060709 · ciano técnico (software) · âmbar CAD (engenharia)
   ============================================================ */

:root{
  --bg: #060709;
  --surface: #0D1015;
  --surface-2: #0A0C10;
  --line: rgba(235,238,244,.08);
  --line-strong: rgba(235,238,244,.16);
  --text: #EDEFF2;
  --muted: #9AA3B0;
  --faint: #5B6370;
  --tech: #55D6FF;   /* software */
  --eng:  #FFAE45;   /* engenharia */
  --font-display: "Sora", ui-sans-serif, sans-serif;
  --font-serif: "Instrument Serif", Georgia, serif;
  --font-body: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --container: 1120px;
  --r: 14px;
  --ease: cubic-bezier(.22,1,.36,1);
}

/* ---------- base ---------- */

*, *::before, *::after{ box-sizing:border-box; margin:0; padding:0 }

html{
  scroll-behavior:smooth;
  scroll-padding-top:96px;
}

body{
  background:var(--bg);
  color:var(--text);
  font:400 16px/1.6 var(--font-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* grão de filme sobre tudo */
body::after{
  content:"";
  position:fixed; inset:0;
  z-index:90;
  pointer-events:none;
  opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

::selection{ background:color-mix(in oklab, var(--tech) 32%, transparent); color:var(--text) }

::-webkit-scrollbar{ width:10px }
::-webkit-scrollbar-track{ background:var(--bg) }
::-webkit-scrollbar-thumb{ background:#1C2029; border-radius:8px; border:2px solid var(--bg) }
::-webkit-scrollbar-thumb:hover{ background:#272D39 }

:focus-visible{
  outline:2px solid var(--tech);
  outline-offset:3px;
  border-radius:4px;
}

.mono{ font-family:var(--font-mono) }
.serif{
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:400;
  font-size:1.06em;
  background:linear-gradient(100deg, var(--eng) 10%, var(--tech) 90%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.container{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:clamp(20px, 5vw, 48px);
}
.ico{ width:14px; height:14px; flex:none }

/* utilitários de estado (JS) */
html.js [data-hero]{
  opacity:0;
  transform:translateY(26px);
}
[data-hero]{
  transition:opacity .85s var(--ease), transform .85s var(--ease);
  transition-delay:var(--d, 0s);
}
html.loaded [data-hero]{
  opacity:1;
  transform:none;
}
html.js [data-reveal]{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay:var(--rd, 0s);
}
html.js [data-reveal].is-in{
  opacity:1;
  transform:none;
}
html.no-js .preloader{ display:none }
html.no-js [data-hero], html.no-js [data-reveal]{ opacity:1; transform:none }

/* ---------- barra de progresso ---------- */

.progress{
  position:fixed; top:0; left:0; right:0;
  height:2px; z-index:80;
  pointer-events:none;
}
.progress span{
  display:block; height:100%;
  transform:scaleX(var(--p, 0));
  transform-origin:0 50%;
  background:linear-gradient(90deg, var(--tech), var(--eng));
}

/* ---------- preloader ---------- */

.preloader{
  position:fixed; inset:0;
  z-index:100;
  background:var(--bg);
  display:grid; place-items:center;
  transition:transform .75s var(--ease) .1s;
}
html.loaded .preloader{
  transform:translateY(-101%);
  pointer-events:none;
}
.preloader__inner{
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.preloader__count{
  font:700 clamp(44px, 8vw, 72px)/1 var(--font-display);
  letter-spacing:-.02em;
  background:linear-gradient(100deg, var(--tech), var(--eng));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.preloader__label{
  font:500 10px var(--font-mono);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--faint);
}

/* ---------- links auxiliares ---------- */

.skip-link{
  position:fixed; top:-48px; left:16px;
  z-index:110;
  background:var(--text); color:#0A0B0E;
  font:500 13px var(--font-body);
  padding:10px 16px; border-radius:8px;
  text-decoration:none;
  transition:top .25s var(--ease);
}
.skip-link:focus{ top:16px }

/* ---------- navegação ---------- */

.nav{
  position:fixed; top:0; left:0; right:0;
  z-index:60;
  transition:background .35s ease, border-color .35s ease, backdrop-filter .35s ease;
  border-bottom:1px solid transparent;
}
.nav.is-scrolled{
  background:rgba(6,7,9,.72);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
}
.nav__inner{
  height:72px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{
  display:inline-flex; align-items:center; gap:10px;
  text-decoration:none; color:var(--text);
  font:600 15px var(--font-body);
  letter-spacing:-.01em;
}
.brand__mark{ width:18px; height:18px }
.brand__dot{ color:var(--tech) }
.nav__links{ display:flex }
.nav__links a{
  position:relative;
  margin-left:28px;
  padding:6px 2px;
  color:var(--muted);
  text-decoration:none;
  font:500 13.5px var(--font-body);
  transition:color .25s ease;
  background-image:linear-gradient(90deg, var(--tech), var(--eng));
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0% 1px;
  transition:color .25s ease, background-size .35s var(--ease);
}
.nav__links a:hover{ color:var(--text) }
.nav__links a[aria-current="true"]{
  color:var(--text);
  background-size:100% 1px;
}
.nav__actions{ display:flex; align-items:center; gap:12px }

.burger{
  display:none;
  width:42px; height:42px;
  background:none; border:1px solid var(--line); border-radius:10px;
  cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.burger span{
  display:block; width:17px; height:1.6px;
  background:var(--text);
  transition:transform .3s var(--ease), opacity .3s ease;
}
body.menu-open .burger span:first-child{ transform:translateY(3.3px) rotate(45deg) }
body.menu-open .burger span:last-child{ transform:translateY(-3.3px) rotate(-45deg) }

/* menu mobile */
.menu{
  position:fixed; inset:0;
  z-index:55;
  background:rgba(6,7,9,.94);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
  display:flex; flex-direction:column;
  padding:110px 28px 36px;
  opacity:0; visibility:hidden;
  transition:opacity .35s ease, visibility .35s ease;
}
body.menu-open .menu{ opacity:1; visibility:visible }
.menu__links{ display:flex; flex-direction:column; gap:8px }
.menu__links a{
  display:flex; align-items:baseline; gap:14px;
  color:var(--text); text-decoration:none;
  font:600 clamp(34px, 9vw, 54px)/1.15 var(--font-display);
  letter-spacing:-.02em;
  opacity:0; transform:translateY(18px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
  transition-delay:0s;
}
.menu__links a small{
  font:500 12px var(--font-mono);
  color:var(--tech);
}
body.menu-open .menu__links a{
  opacity:1; transform:none;
  transition-delay:calc(var(--i) * 70ms + 120ms);
}
.menu__foot{
  margin-top:auto;
  display:flex; flex-direction:column; gap:6px;
  font-size:11px;
  letter-spacing:.12em;
  color:var(--faint);
}

/* ---------- hero ---------- */

.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  overflow:hidden;
}
.hero__canvas{ position:absolute; inset:0; z-index:0; width:100%; height:100% }

.hero__glow{
  position:absolute; z-index:0;
  width:min(46vw, 560px); aspect-ratio:1;
  border-radius:50%;
  filter:blur(110px);
  pointer-events:none;
  transform:translate(calc(var(--hx, 0) * 28px), calc(var(--hy, 0) * 28px));
}
.hero__glow--tech{
  top:-14%; left:-6%;
  background:color-mix(in oklab, var(--tech) 26%, transparent);
}
.hero__glow--eng{
  bottom:-22%; right:-8%;
  background:color-mix(in oklab, var(--eng) 18%, transparent);
}

.hero__grid{
  position:absolute; inset:0; z-index:0;
  background-image:
    linear-gradient(rgba(235,238,244,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(235,238,244,.05) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 90% 75% at 50% 42%, #000 25%, transparent 78%);
  mask-image:radial-gradient(ellipse 90% 75% at 50% 42%, #000 25%, transparent 78%);
}

/* assinatura: retículo de CAD + leitura de coordenadas */
.crosshair{
  position:absolute; inset:0; z-index:1;
  pointer-events:none;
  opacity:0;
  transition:opacity .4s ease;
}
.crosshair.is-on{ opacity:1 }
.crosshair__x{
  position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(85,214,255,.26) 28%, rgba(85,214,255,.26) 72%, transparent);
  transform:translateY(var(--chy, 50vh));
}
.crosshair__y{
  position:absolute; top:0; bottom:0; left:0; width:1px;
  background:linear-gradient(180deg, transparent, rgba(255,174,69,.22) 28%, rgba(255,174,69,.22) 72%, transparent);
  transform:translateX(var(--chx, 50vw));
}
.crosshair__tag{
  position:absolute; top:0; left:0;
  font-size:10px; letter-spacing:.08em;
  color:var(--muted);
  background:rgba(6,7,9,.78);
  border:1px solid var(--line);
  border-radius:6px;
  padding:4px 8px;
  transform:translate(calc(var(--chx, 50vw) + 14px), calc(var(--chy, 50vh) + 14px));
}

.hero__content{
  position:relative; z-index:2;
  padding-top:96px;
}
.hero__eyebrow{
  display:flex; align-items:center; gap:10px;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:lowercase;
  color:var(--muted);
  margin-bottom:clamp(22px, 3.5vh, 36px);
}
.hero__sep{ color:var(--faint); margin-left:6px }
.hero__x{ color:var(--faint) }
.pulse{
  width:7px; height:7px; flex:none;
  border-radius:50%;
  background:var(--tech);
  box-shadow:0 0 0 0 color-mix(in oklab, var(--tech) 55%, transparent);
  animation:pulse 2.4s ease-out infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 color-mix(in oklab, var(--tech) 55%, transparent) }
  70%{ box-shadow:0 0 0 9px transparent }
  100%{ box-shadow:0 0 0 0 transparent }
}

.hero__title{
  font:600 clamp(2.9rem, 8.2vw, 6.3rem)/1.02 var(--font-display);
  letter-spacing:-.035em;
  max-width:14ch;
}
.hero__dot{ color:var(--tech) }
.hero__sub{
  margin-top:clamp(20px, 3vh, 30px);
  max-width:56ch;
  font-size:clamp(15px, 1.6vw, 17px);
  line-height:1.7;
  color:var(--muted);
}
.hero__ctas{
  display:flex; flex-wrap:wrap; gap:14px;
  margin-top:clamp(28px, 4.5vh, 44px);
}

.hero__foot{
  position:absolute; left:0; right:0; bottom:0;
  z-index:2;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding-bottom:26px;
  font-size:10.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--faint);
}
.hero__scroll{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  color:var(--faint);
  text-decoration:none;
  transition:color .3s ease;
}
.hero__scroll:hover{ color:var(--muted) }
.hero__scrollline{
  width:1px; height:34px;
  background:linear-gradient(var(--tech), transparent);
  animation:scrollPulse 2.2s var(--ease) infinite;
}
@keyframes scrollPulse{
  0%{ transform:scaleY(0); transform-origin:top }
  45%{ transform:scaleY(1); transform-origin:top }
  55%{ transform:scaleY(1); transform-origin:bottom }
  100%{ transform:scaleY(0); transform-origin:bottom }
}

/* ---------- botões ---------- */

.btn{
  position:relative;
  display:inline-flex; align-items:center;
  padding:14px 24px;
  border-radius:999px;
  border:1px solid var(--line-strong);
  background:transparent;
  color:var(--text);
  font:500 14px var(--font-body);
  text-decoration:none;
  cursor:pointer;
  overflow:hidden;
  transform:translate(var(--tx, 0), var(--ty, 0));
  transition:transform .18s ease-out, background .3s ease, border-color .3s ease;
}
.btn--solid{ background:var(--text); color:#0A0B0E; border-color:transparent }
.btn--solid:hover{ background:#fff }
.btn--solid::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(110deg, transparent 32%, rgba(255,255,255,.55) 50%, transparent 62%);
  transform:translateX(-130%);
  transition:transform .7s ease;
}
.btn--solid:hover::after{ transform:translateX(130%) }
.btn--ghost:hover{
  background:rgba(235,238,244,.05);
  border-color:var(--line-strong);
}
.btn--sm{ padding:9px 16px; font-size:13px }
.magnetic__inner{
  position:relative;
  display:inline-flex; align-items:center; gap:9px;
  transform:translate(var(--itx, 0), var(--ity, 0));
  transition:transform .18s ease-out;
}

/* ---------- marquee ---------- */

.marquee{
  overflow:hidden;
  border-block:1px solid var(--line);
  padding-block:18px;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee__track{
  display:flex;
  width:max-content;
  animation:marquee 32s linear infinite;
}
.marquee:hover .marquee__track{ animation-play-state:paused }
.marquee__list{
  display:flex; align-items:center; gap:44px;
  padding-right:44px;
  list-style:none;
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--faint);
  white-space:nowrap;
}
.marquee__list li{ display:flex; align-items:center; gap:44px }
.marquee__list li::after{
  content:"◆";
  font-size:7px;
  color:color-mix(in oklab, var(--tech) 55%, transparent);
}
.marquee__list li:nth-child(4n)::after{
  color:color-mix(in oklab, var(--eng) 55%, transparent);
}
@keyframes marquee{ to{ transform:translateX(-50%) } }

/* ---------- seções ---------- */

.section{ padding-block:clamp(90px, 12vh, 150px) }
.section--tech{ --accent:var(--tech) }
.section--eng{ --accent:var(--eng) }

.sheet{
  position:relative;
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  border-top:1px solid var(--line-strong);
  padding-top:18px;
  margin-bottom:clamp(40px, 6vw, 72px);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--faint);
}
.sheet::before, .sheet::after{
  content:"+";
  position:absolute; top:-8px;
  font:400 12px var(--font-mono);
  color:var(--faint);
  line-height:1;
}
.sheet::before{ left:-2px }
.sheet::after{ right:-2px }
.sheet__no{ color:var(--accent, var(--tech)) }

.section__intro{
  max-width:52ch;
  margin-bottom:clamp(40px, 6vw, 64px);
  font-size:16.5px;
  color:var(--muted);
}

/* ---------- sobre ---------- */

.about{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:clamp(40px, 6vw, 88px);
  align-items:start;
}
.about h2{
  font:600 clamp(30px, 4.2vw, 46px)/1.1 var(--font-display);
  letter-spacing:-.025em;
  margin-bottom:24px;
}
.about__text p:not(.about__edu){
  color:var(--muted);
  margin-bottom:16px;
  max-width:56ch;
}
.about__edu{
  margin-top:30px;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--faint);
}

.stats{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:14px;
}
.stat{
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:24px 22px 20px;
  background:linear-gradient(180deg, var(--surface), transparent 150%);
  transition:border-color .3s ease, transform .3s var(--ease);
}
.stat:hover{
  border-color:var(--line-strong);
  transform:translateY(-3px);
}
.stat dd{
  font:600 clamp(30px, 3.4vw, 40px)/1 var(--font-display);
  letter-spacing:-.02em;
}
.stat dd i{
  font-style:normal;
  font-size:.55em;
  vertical-align:.45em;
  color:var(--tech);
}
.stat:nth-child(even) dd i{ color:var(--eng) }
.stat dt{
  margin-top:10px;
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--faint);
}

/* ---------- trajetória (timeline) ---------- */

.timeline{ border-top:1px solid var(--line-strong) }
.tl-item{
  display:grid;
  grid-template-columns:210px 1fr;
  gap:8px clamp(24px, 4vw, 56px);
  padding:30px 10px;
  border-bottom:1px dashed var(--line);
  transition:background .3s ease;
}
.tl-item:hover{ background:rgba(235,238,244,.02) }
.tl-meta{
  display:flex; flex-direction:column; gap:6px;
  padding-top:7px;
  font:500 10.5px var(--font-mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--faint);
}
.tl-dot{
  display:inline-flex; align-items:center; gap:9px;
  color:var(--tech);
}
.tl-dot::before{
  content:"";
  width:7px; height:7px; flex:none;
  border-radius:50%;
  background:var(--tech);
  box-shadow:0 0 10px color-mix(in oklab, var(--tech) 65%, transparent);
}
.tl-item--eng .tl-dot{ color:var(--eng) }
.tl-item--eng .tl-dot::before{
  background:var(--eng);
  box-shadow:0 0 10px color-mix(in oklab, var(--eng) 65%, transparent);
}
.tl-body h3{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px;
  font:600 18px var(--font-display);
  letter-spacing:-.01em;
}
.tl-badge{
  font:500 9px var(--font-mono);
  font-style:normal;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--tech);
  border:1px solid color-mix(in oklab, var(--tech) 40%, var(--line));
  border-radius:999px;
  padding:3px 9px;
}
.tl-item--eng .tl-badge{
  color:var(--eng);
  border-color:color-mix(in oklab, var(--eng) 40%, var(--line));
}
.tl-role{
  margin-top:3px;
  font:500 13px var(--font-body);
  color:var(--muted);
}
.tl-body > p:not(.tl-role){
  margin-top:10px;
  font-size:14px;
  line-height:1.7;
  color:var(--muted);
  max-width:72ch;
}
.tl-body .tags{ margin-top:14px; padding-top:0 }

@media (max-width:1020px){
  .nav__links a{ margin-left:18px; font-size:13px }
}
@media (max-width:700px){
  .tl-item{ grid-template-columns:1fr; gap:10px; padding:24px 2px }
  .tl-meta{ flex-direction:row; align-items:center; gap:12px; flex-wrap:wrap }
}

/* ---------- cards (base) ---------- */

.card{
  position:relative;
  display:flex; flex-direction:column; gap:13px;
  padding:clamp(20px, 2.4vw, 28px);
  border:1px solid var(--line);
  border-radius:var(--r);
  background:linear-gradient(180deg, #0D1015, #0A0C10);
  overflow:hidden;
  transition:transform .35s var(--ease), border-color .35s ease, box-shadow .35s ease;
}
.card::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(540px circle at var(--mx, 50%) var(--my, 50%),
    color-mix(in oklab, var(--accent, var(--tech)) 9%, transparent), transparent 65%);
  opacity:0;
  transition:opacity .4s ease;
  pointer-events:none;
}
.card:hover{
  transform:translateY(-4px);
  border-color:color-mix(in oklab, var(--accent, var(--tech)) 28%, var(--line));
  box-shadow:0 26px 60px -34px rgba(0,0,0,.85);
}
.card:hover::before{ opacity:1 }

.card h3{
  font:600 19px/1.3 var(--font-display);
  letter-spacing:-.01em;
}
.card > p, .card p{
  font-size:14.5px;
  line-height:1.65;
  color:var(--muted);
}
.card__top{
  display:flex; align-items:center; justify-content:space-between;
  font-size:10.5px;
  letter-spacing:.18em;
  color:var(--faint);
}
.card__arrow{
  width:16px; height:16px;
  opacity:.45;
  transition:transform .3s var(--ease), opacity .3s ease, color .3s ease;
}
.card:hover .card__arrow{
  transform:translate(3px, -3px);
  opacity:1;
  color:var(--accent, var(--tech));
}
.card__media{
  border:1px solid var(--line);
  border-radius:10px;
  background:rgba(4,5,7,.5);
  padding:14px;
  margin-top:4px;
}
.tags{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-top:auto;
  padding-top:4px;
}
.chip{
  font:500 11px var(--font-mono);
  padding:5px 11px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--muted);
  letter-spacing:.02em;
}
.chip--on{
  color:var(--eng);
  border-color:color-mix(in oklab, var(--eng) 40%, var(--line));
}

/* ---------- bento tecnologia ---------- */

.bento{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:16px;
}
.bento .card--featured{ grid-column:span 7; grid-row:span 2 }
.bento .card:nth-child(2),
.bento .card:nth-child(3){ grid-column:span 5 }
.bento .card--meta{
  grid-column:span 12;
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-rows:auto auto auto;
  column-gap:28px;
  align-items:center;
}
.card--meta .card__top{ grid-column:1/-1; grid-row:1 }
.card--meta h3{ grid-column:1; grid-row:2/4; align-self:center }
.card--meta p{ grid-column:2; grid-row:2; align-self:end }
.card--meta .tags{ grid-column:2; grid-row:3; margin-top:0; padding-top:2px }

/* terminal e tags do destaque ancorados embaixo */
.card--featured .card__media{ margin-top:auto }
.card--featured .tags{ margin-top:0 }

/* terminal */
.term{
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
  background:#050608;
}
.term__bar{
  display:flex; align-items:center; gap:6px;
  padding:9px 12px;
  border-bottom:1px solid var(--line);
  background:rgba(235,238,244,.02);
}
.term__bar i{ width:9px; height:9px; border-radius:50%; background:#2A2F3A }
.term__bar i:nth-child(1){ background:#FF5F57 }
.term__bar i:nth-child(2){ background:#FEBC2E }
.term__bar i:nth-child(3){ background:#28C840 }
.term__bar span{
  margin-left:8px;
  font-size:10px;
  color:var(--faint);
  letter-spacing:.08em;
}
.term__body{
  padding:16px 16px 18px;
  font-size:12.5px;
  line-height:2;
}
.t-line{
  opacity:.26;
  transition:opacity .3s ease;
}
.t-line.is-on{ opacity:1 }
.t-prompt{ color:var(--tech) }
.t-line.is-ok .t-txt{ color:var(--tech) }
html.no-js .t-line{ opacity:1 }
.caret{
  display:inline-block;
  width:7px; height:13px;
  margin-left:3px;
  vertical-align:-2px;
  background:var(--tech);
  animation:blink 1.1s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity:0 } }

/* sparkline & barras */
.spark, .bars{ display:block; width:100%; height:auto }
.spark__line{
  stroke-dasharray:1;
  stroke-dashoffset:1;
  transition:stroke-dashoffset 1.5s var(--ease) .3s;
}
.card.is-in .spark__line{ stroke-dashoffset:0 }
.bar{
  transform:scaleY(0);
  transform-origin:bottom;
  transform-box:fill-box;
  transition:transform .7s var(--ease);
}
.card.is-in .bar{ transform:scaleY(1) }
.bar:nth-child(1){ transition-delay:.15s }
.bar:nth-child(2){ transition-delay:.25s }
.bar:nth-child(3){ transition-delay:.35s }
.bar:nth-child(4){ transition-delay:.45s }
.bar:nth-child(5){ transition-delay:.55s }
.bar:nth-child(6){ transition-delay:.65s }
html.no-js .spark__line{ stroke-dashoffset:0 }
html.no-js .bar{ transform:none }

/* ---------- engenharia ---------- */

.eng__head{
  display:grid;
  grid-template-columns:1fr auto;
  gap:clamp(28px, 5vw, 64px);
  align-items:center;
  margin-bottom:clamp(40px, 6vw, 64px);
}
.eng__head .section__intro{ margin-bottom:0 }

.blueprint{
  width:clamp(220px, 26vw, 300px);
  height:auto;
  color:color-mix(in oklab, var(--eng) 42%, #8B93A0);
}
.blueprint .draw{
  stroke-dasharray:1;
  stroke-dashoffset:1;
  transition:stroke-dashoffset 1.1s var(--ease);
}
.blueprint .d1{ transition-delay:.05s }
.blueprint .d2{ transition-delay:.35s }
.blueprint .d3{ transition-delay:.65s }
.blueprint .d4 .draw{ transition-delay:.9s }
.blueprint .d5 .draw{ transition-delay:1.1s }
.blueprint .d4 text, .blueprint .d5 text,
.blueprint .d4 path, .blueprint .d5 path{
  opacity:0;
  transition:opacity .5s ease 1.7s;
}
.eng__head.is-in .blueprint .draw{ stroke-dashoffset:0 }
.eng__head.is-in .blueprint .d4 text,
.eng__head.is-in .blueprint .d5 text,
.eng__head.is-in .blueprint .d4 path,
.eng__head.is-in .blueprint .d5 path{ opacity:1 }
/* linhas ocultas / de centro viram tracejadas após o desenho */
.eng__head.is-in .blueprint .dash{
  stroke-dasharray:.011 .012;
  transition:stroke-dasharray .3s ease 2.1s;
}
html.no-js .blueprint .draw{ stroke-dashoffset:0 }
html.no-js .blueprint .dash{ stroke-dasharray:.011 .012 }
html.no-js .blueprint text,
html.no-js .blueprint path{ opacity:1 }
.bp__label{
  font:500 9.5px var(--font-mono);
  fill:currentColor;
  opacity:.8;
  letter-spacing:.06em;
}

.eng-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
}
.eng-card{ padding:0; gap:0 }
.eng-card__view{
  height:120px;
  display:grid; place-items:center;
  border-bottom:1px solid var(--line);
  background-image:
    linear-gradient(rgba(255,174,69,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,174,69,.06) 1px, transparent 1px);
  background-size:24px 24px;
  font:600 44px var(--font-mono);
  color:transparent;
  -webkit-text-stroke:1px color-mix(in oklab, var(--eng) 34%, transparent);
}
.eng-card__body{
  padding:22px 22px 16px;
  display:flex; flex-direction:column; gap:11px;
}
.spec{ margin-top:2px }
.spec > div{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:7px 0;
  border-top:1px dashed color-mix(in oklab, var(--eng) 20%, var(--line));
}
.spec dt{
  font:500 9.5px var(--font-mono);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--faint);
}
.spec dd{
  font:400 10.5px var(--font-mono);
  color:var(--muted);
  text-align:right;
}
.eng-card__tb{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  border-top:1px solid var(--line);
}
.eng-card__tb span{
  display:flex; flex-direction:column; gap:3px;
  padding:9px 11px;
  border-left:1px solid var(--line);
  font-size:10px;
  color:var(--text);
  transition:background .3s ease;
}
.eng-card__tb span:first-child{ border-left:0 }
.eng-card__tb b{
  font:500 8.5px var(--font-mono);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--faint);
}
.eng-card:hover .eng-card__tb span{ background:color-mix(in oklab, var(--eng) 7%, transparent) }
.eng-card:hover .eng-card__tb span:nth-child(1){ transition-delay:0s }
.eng-card:hover .eng-card__tb span:nth-child(2){ transition-delay:.06s }
.eng-card:hover .eng-card__tb span:nth-child(3){ transition-delay:.12s }
.eng-card:hover .eng-card__tb span:nth-child(4){ transition-delay:.18s }
.eng-card .tags{ padding:0 22px 20px }

/* ---------- contato ---------- */

.section--contact{ padding-bottom:clamp(70px, 9vh, 110px) }
.contact{
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
  gap:16px;
  padding-block:clamp(20px, 4vh, 50px);
}
.contact__eyebrow{
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--faint);
}
.contact__title{
  font:600 clamp(40px, 7vw, 84px)/1.05 var(--font-display);
  letter-spacing:-.03em;
}
.contact__email{
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:14px;
  margin-top:10px;
}
.contact__link{
  position:relative;
  font:500 clamp(17px, 2.6vw, 25px) var(--font-mono);
  color:var(--text);
  text-decoration:none;
  padding-bottom:5px;
  background-image:linear-gradient(90deg, var(--tech), var(--eng));
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0% 1px;
  transition:background-size .45s var(--ease), color .3s ease;
}
.contact__link:hover{
  color:var(--tech);
  background-size:100% 1px;
}
.chip--btn{
  display:inline-flex; align-items:center; gap:8px;
  background:transparent;
  cursor:pointer;
  transition:border-color .3s ease, color .3s ease;
}
.chip--btn:hover{ border-color:var(--tech); color:var(--text) }
.chip--btn.is-copied{ color:var(--tech); border-color:color-mix(in oklab, var(--tech) 45%, var(--line)) }
.contact__socials{
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px;
  margin-top:18px;
}

/* ---------- rodapé ---------- */

.footer{
  border-top:1px solid var(--line);
  padding-block:26px;
}
.footer__inner{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:12px;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--faint);
}
.footer__clock{
  display:inline-flex; align-items:center; gap:9px;
}
.footer__clock .pulse{
  width:6px; height:6px;
  background:var(--eng);
  animation:none;
  box-shadow:none;
}
.footer__top{ color:var(--faint); text-decoration:none; transition:color .3s ease }
.footer__top:hover{ color:var(--text) }

/* ---------- responsivo ---------- */

@media (max-width: 980px){
  .bento .card--featured{ grid-column:span 12; grid-row:auto }
  .bento .card:nth-child(2),
  .bento .card:nth-child(3){ grid-column:span 6 }
  .eng-grid{ grid-template-columns:1fr; max-width:640px }
  .eng__head{ grid-template-columns:1fr }
  .blueprint{ width:min(260px, 70vw) }
  .about{ grid-template-columns:1fr }
  .card--meta{ display:flex; flex-direction:column; align-items:flex-start }
  .card--meta p{ grid-column:auto; grid-row:auto }
}

@media (max-width: 820px){
  .nav__links, .nav__cv{ display:none }
  .burger{ display:flex }
  .hero__foot .hero__coords{ display:none }
  .bento .card:nth-child(2),
  .bento .card:nth-child(3){ grid-column:span 12 }
}

@media (max-width: 640px){
  .stats{ grid-template-columns:1fr 1fr; gap:10px }
  .stat{ padding:18px 16px 14px }
  .hero__title{ max-width:12ch }
  .hero__eyebrow .hero__sep{ display:none }
  .footer__inner{ flex-direction:column; align-items:flex-start }
  .eng-card__tb span{ padding:8px }
  .contact__email{ flex-direction:column; gap:10px }
}

/* ---------- movimento reduzido ---------- */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    transition-delay:0s !important;
  }
  html.js [data-hero], html.js [data-reveal]{ opacity:1; transform:none }
  .crosshair{ display:none }
  .marquee__track{ animation:none }
  .hero__scrollline{ animation:none }
}