/* ═══════════════════════════════════════════════════════════════
   Portfólio — Gabriel Henrique Silva Pereira
   Estilos: tokens, componentes, seções e responsivo.
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════
   TOKENS
   ═══════════════════════════════════════════════════ */
:root{
  /* tela */
  --void:      #0F0D14;
  --void-2:    #16121D;
  --panel:     #1B1626;
  --panel-2:   #221C2F;
  --line:      #2E2740;
  --line-soft: #241E32;

  /* plástico bege amarelado (as peças "físicas") */
  --case:      #D9C9A3;
  --case-2:    #BFAE86;
  --case-3:    #8E7F5E;
  --case-ink:  #33291A;

  /* fósforo */
  --amber:     #FFB43B;
  --amber-2:   #C98A2A;
  --pink:      #FF4D7E;
  --mint:      #7EE787;

  --ink:   #F2E9D8;
  --ink-2: #B3A793;
  --ink-3: #776C5E;

  --f-pixel: 'Pixelify Sans', monospace;
  --f-crt:   'VT323', 'IBM Plex Mono', monospace;
  --f-mono:  'IBM Plex Mono', ui-monospace, monospace;

  --head-h: 62px;
  --maxw: 1120px;
  --ease: cubic-bezier(.2,.7,.3,1);
}

/* tema alternativo: fósforo verde (comando: tema verde) */
html[data-tema="verde"]{ --amber:#5BE87E; --amber-2:#39A855; --pink:#FF6FA0; }
html[data-tema="mono"]{ --amber:#E8E4DA; --amber-2:#9A948A; --pink:#E8E4DA; --mint:#E8E4DA; }

*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:80px; }
body{
  background:var(--void);
  color:var(--ink-2);
  font-family:var(--f-mono);
  font-size:15.5px;
  line-height:1.75;
  overflow-x:hidden;
  min-height:100vh;
}
body.travado{ overflow:hidden; }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
::selection{ background:var(--amber); color:var(--void); }

:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.pular-para{
  position:fixed; top:8px; left:8px; z-index:4000;
  background:var(--amber); color:var(--void); padding:10px 16px; border-radius:2px;
  font-family:var(--f-pixel); font-size:.92rem; font-weight:600; transform:translateY(-200%);
}
.pular-para:focus{ transform:none; }

/* ═══ ambiente: scanlines + vinheta ═══ */
.crt{ position:fixed; inset:0; z-index:900; pointer-events:none; }
.crt::before{
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(180deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px);
  opacity:.4;
}
.crt::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 120% 90% at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%);
}
html[data-crt="off"] .crt{ display:none; }

.brilho{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(700px 420px at 78% -5%, rgba(255,180,59,.09), transparent 65%),
    radial-gradient(600px 500px at 8% 12%, rgba(255,77,126,.055), transparent 65%);
}
.pagina{ position:relative; z-index:2; }

/* ═══ barra de progresso ═══ */
.progresso{
  position:fixed; top:0; left:0; height:3px; width:0%; z-index:1200;
  background:var(--amber); box-shadow:0 0 10px rgba(255,180,59,.6);
}

/* ═══════════════════════════════════════════════════
   BOOT
   ═══════════════════════════════════════════════════ */
#boot{
  position:fixed; inset:0; z-index:3000; background:var(--void);
  display:flex; align-items:center; justify-content:center; padding:24px;
}
#boot.saindo{ animation:desliga .5s var(--ease) forwards; }
@keyframes desliga{
  0%{ opacity:1; transform:scaleY(1); }
  62%{ opacity:1; transform:scaleY(.008); filter:brightness(2.4); }
  100%{ opacity:0; transform:scaleY(0); filter:brightness(3); }
}
.boot-tela{
  width:100%; max-width:660px;
  font-family:var(--f-crt); font-size:1.32rem; line-height:1.35;
  color:var(--amber); text-shadow:0 0 8px rgba(255,180,59,.35);
}
.boot-tela b{ color:var(--case); font-weight:400; }
.boot-tela .ok{ color:var(--mint); }
.boot-tela .er{ color:var(--pink); }
.boot-linha{ white-space:pre-wrap; word-break:break-word; }
.boot-cursor{ display:inline-block; width:.55em; height:1em; background:var(--amber);
  vertical-align:-2px; animation:pisca 1s steps(2) infinite; }
@keyframes pisca{ 0%,50%{opacity:1} 50.01%,100%{opacity:0} }
.boot-pular{
  position:fixed; right:18px; bottom:18px; font-family:var(--f-pixel); font-size:.86rem; font-weight:600;
  color:var(--ink-3); border:1px solid var(--line); padding:10px 14px; border-radius:2px;
}
.boot-pular:hover{ color:var(--amber); border-color:var(--amber); }

/* ═══════════════════════════════════════════════════
   PEÇAS REUTILIZÁVEIS
   ═══════════════════════════════════════════════════ */
/* tecla de teclado bege */
.tecla{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--f-mono); font-size:.76rem; font-weight:500; letter-spacing:.02em;
  color:var(--case-ink); background:var(--case);
  padding:7px 12px; border-radius:4px;
  box-shadow:0 3px 0 var(--case-3), inset 0 1px 0 rgba(255,255,255,.45);
}

.botao{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-pixel); font-size:1rem; font-weight:700; line-height:1.4; letter-spacing:.05em;
  padding:16px 20px; border-radius:3px; cursor:pointer;
  transition:transform .12s var(--ease), box-shadow .12s var(--ease), background .2s, color .2s;
}
.botao.solido{
  background:var(--amber); color:var(--void);
  box-shadow:0 4px 0 var(--amber-2);
}
.botao.solido:hover{ transform:translateY(2px); box-shadow:0 2px 0 var(--amber-2); }
.botao.vazado{
  color:var(--amber); border:1px solid var(--line); background:var(--panel);
  box-shadow:0 4px 0 var(--line-soft);
}
.botao.vazado:hover{ transform:translateY(2px); box-shadow:0 2px 0 var(--line-soft); border-color:var(--amber); }
.botao:active{ transform:translateY(4px); box-shadow:none; }

/* cabeçalho de seção */
.secao{ padding:104px 0; position:relative; }
.secao-topo{ margin-bottom:44px; }
.caminho{
  font-family:var(--f-crt); font-size:1.25rem; color:var(--amber);
  display:block; margin-bottom:10px; letter-spacing:.03em;
}
.caminho::before{ content:'~/'; color:var(--ink-3); }
.secao-topo h2{
  font-family:var(--f-pixel); color:var(--ink);
  font-size:clamp(1.75rem,4.8vw,2.6rem); line-height:1.24; font-weight:700;
  letter-spacing:0;
}
.secao-topo .sub{ margin-top:16px; max-width:56ch; color:var(--ink-2); font-size:.95rem; }

/* aparecer no scroll */
.js .surge{ opacity:0; transform:translateY(18px); transition:opacity .55s var(--ease), transform .55s var(--ease); }
.js .surge.ok{ opacity:1; transform:none; }
.surge.a1{transition-delay:.06s} .surge.a2{transition-delay:.12s}
.surge.a3{transition-delay:.18s} .surge.a4{transition-delay:.24s} .surge.a5{transition-delay:.3s}

/* ═══════════════════════════════════════════════════
   CABEÇALHO
   ═══════════════════════════════════════════════════ */
header{
  position:fixed; top:0; left:0; width:100%; height:var(--head-h); z-index:1000;
  display:flex; align-items:center; border-bottom:1px solid transparent;
  transition:background .25s, border-color .25s, backdrop-filter .25s;
}
header.grudado{
  background:rgba(15,13,20,.82); border-bottom-color:var(--line);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.head-int{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; }

.marca{ display:inline-flex; align-items:center; gap:10px; font-family:var(--f-pixel);
  font-size:1.02rem; font-weight:700; letter-spacing:.06em; color:var(--ink); }
.marca .led{ width:8px; height:8px; border-radius:50%; background:var(--mint);
  box-shadow:0 0 8px var(--mint); animation:respira 2.6s ease-in-out infinite; }
@keyframes respira{ 0%,100%{opacity:1} 50%{opacity:.45} }
.marca:hover span.txt{ color:var(--amber); }

.menu{ list-style:none; display:flex; align-items:center; gap:2px; }
.menu a{ font-family:var(--f-mono); font-size:.82rem; color:var(--ink-2);
  padding:8px 12px; border-radius:3px; position:relative; transition:color .2s, background .2s; }
.menu a:hover{ color:var(--ink); background:var(--panel); }
.menu a.aqui{ color:var(--amber); }
.menu a.aqui::before{ content:'▸'; position:absolute; left:1px; top:8px; font-size:.7rem; }

.head-fer{ display:flex; align-items:center; gap:6px; margin-left:6px; }
.fer{
  width:34px; height:34px; display:grid; place-items:center; border-radius:3px;
  border:1px solid var(--line); color:var(--ink-3); transition:color .2s, border-color .2s;
}
.fer:hover{ color:var(--amber); border-color:var(--amber); }
.fer[aria-pressed="true"]{ color:var(--amber); border-color:var(--amber); }
.fer svg{ width:16px; height:16px; }

.abre-term{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--f-mono); font-size:.78rem;
  color:var(--amber); border:1px solid var(--line); background:var(--panel);
  padding:7px 12px; border-radius:3px; transition:border-color .2s, background .2s;
}
.abre-term:hover{ border-color:var(--amber); background:var(--panel-2); }
.abre-term .ico{ display:none; font-family:var(--f-crt); font-size:1.15rem; line-height:1; }
.abre-term kbd{ font-family:var(--f-mono); background:var(--case); color:var(--case-ink);
  padding:1px 6px; border-radius:3px; font-size:.72rem; box-shadow:0 2px 0 var(--case-3); }

.hamb{ display:none; width:38px; height:38px; border:1px solid var(--line); border-radius:3px;
  position:relative; background:var(--panel); }
.hamb i{ position:absolute; left:9px; right:9px; height:2px; background:var(--amber);
  transition:transform .25s var(--ease), opacity .2s; }
.hamb i:nth-child(1){ top:12px } .hamb i:nth-child(2){ top:18px } .hamb i:nth-child(3){ top:24px }
body.menu-aberto .hamb i:nth-child(1){ transform:translateY(6px) rotate(45deg) }
body.menu-aberto .hamb i:nth-child(2){ opacity:0 }
body.menu-aberto .hamb i:nth-child(3){ transform:translateY(-6px) rotate(-45deg) }

/* ═══════════════════════════════════════════════════
   HERÓI
   ═══════════════════════════════════════════════════ */
.heroi{ min-height:100vh; display:flex; align-items:center; padding:calc(var(--head-h) + 40px) 0 70px; }
.heroi-grid{ display:grid; grid-template-columns:1fr .92fr; gap:56px; align-items:center; width:100%; }

.heroi .etiqueta{
  display:inline-block; font-family:var(--f-pixel); font-size:.84rem; font-weight:600; letter-spacing:.09em; line-height:1.6;
  color:var(--case-ink); background:var(--case); padding:8px 12px; border-radius:2px;
  margin-bottom:22px; box-shadow:3px 3px 0 rgba(0,0,0,.35);
}
.heroi h1{
  font-family:var(--f-pixel); font-weight:700; color:var(--ink);
  font-size:clamp(2.5rem,7.4vw,4.7rem); line-height:1.08; letter-spacing:0; word-spacing:.22em;
  margin-bottom:16px; text-shadow:5px 5px 0 rgba(255,180,59,.17);
}
.heroi h1 em{ font-style:normal; color:var(--amber); }
.heroi .linha-crt{
  font-family:var(--f-crt); font-size:1.4rem; color:var(--amber); line-height:1.3;
  margin-bottom:24px; letter-spacing:.02em;
}
.heroi .conta{ max-width:50ch; font-size:1rem; color:var(--ink-2); margin-bottom:34px; }
.heroi .conta strong{ color:var(--ink); font-weight:600; }
.heroi-acoes{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.dica-term{ margin-top:26px; font-size:.82rem; color:var(--ink-3); display:flex; align-items:center;
  gap:9px; flex-wrap:wrap; text-align:left; cursor:pointer; transition:color .2s; }
.dica-term:hover{ color:var(--ink-2); }
.so-mob{ display:none; }
.dica-term kbd{ font-family:var(--f-mono); background:var(--case); color:var(--case-ink);
  padding:2px 8px; border-radius:3px; font-size:.76rem; box-shadow:0 2px 0 var(--case-3); }

/* monitor com bezel bege */
.monitor{ position:relative; }
.monitor-corpo{
  background:var(--case); border-radius:14px 14px 6px 6px; padding:16px 16px 34px;
  box-shadow:0 26px 60px -30px #000, inset 0 2px 0 rgba(255,255,255,.5), inset 0 -3px 0 var(--case-3);
  position:relative;
}
.monitor-tela{
  background:#0B0910; border-radius:6px; padding:20px 18px; min-height:326px;
  box-shadow:inset 0 0 0 2px #05040A, inset 0 0 40px rgba(0,0,0,.9);
  font-family:var(--f-crt); font-size:1.16rem; line-height:1.36; color:var(--ink-2);
  overflow:hidden;
}
.monitor-corpo::after{
  content:''; position:absolute; left:50%; transform:translateX(-50%); bottom:13px;
  width:52px; height:5px; border-radius:3px; background:var(--case-3);
}
.monitor .led-power{
  position:absolute; right:20px; bottom:12px; width:7px; height:7px; border-radius:50%;
  background:var(--mint); box-shadow:0 0 8px var(--mint);
}
.monitor-pe{
  width:120px; height:16px; margin:0 auto; background:var(--case-2);
  border-radius:0 0 8px 8px; box-shadow:0 10px 24px -12px #000;
}
.monitor-base{ width:190px; height:9px; margin:0 auto; background:var(--case);
  border-radius:5px; box-shadow:0 8px 18px -8px #000, inset 0 1px 0 rgba(255,255,255,.4); }

.neofetch .dados{ min-width:0; }
.nf-l{ padding-left:5.6em; text-indent:-5.6em; }
.nf-l .k{ color:var(--amber); }
.nf-l .v{ color:var(--ink); }
.nf-sep{ color:var(--ink-3); }
.nf-cores{ display:flex; gap:4px; margin-top:8px; }
.nf-cores i{ width:16px; height:9px; display:block; }
.prompt-linha{ margin-top:12px; color:var(--mint); }
.prompt-linha .cur{ display:inline-block; width:.5em; height:.95em; background:var(--mint);
  vertical-align:-2px; animation:pisca 1.1s steps(2) infinite; }

/* ═══════════════════════════════════════════════════
   SOBRE
   ═══════════════════════════════════════════════════ */
.sobre-grid{ display:grid; grid-template-columns:1.35fr .85fr; gap:56px; align-items:start; }
.sobre-txt p{ margin-bottom:16px; max-width:60ch; }
.sobre-txt p strong{ color:var(--ink); font-weight:600; }
.sobre-txt code{ font-family:var(--f-mono); color:var(--amber); font-size:.88em;
  background:var(--panel); padding:2px 6px; border-radius:3px; }
.teclas{ display:flex; flex-wrap:wrap; gap:9px; margin-top:26px; }

/* foto no suporte bege */
.foto-caixa{ background:var(--case); padding:12px 12px 0; border-radius:5px;
  box-shadow:0 22px 50px -28px #000, inset 0 2px 0 rgba(255,255,255,.45); max-width:330px; margin:0 auto; }
.foto-janela{ position:relative; overflow:hidden; border-radius:3px; aspect-ratio:4/5; background:var(--void-2); }
.foto-janela img{ width:100%; height:100%; object-fit:cover; object-position:center 28%;
  transition:transform .5s var(--ease); }
.foto-caixa:hover .foto-janela img{ transform:scale(1.05); }
.foto-reserva{ display:none; width:100%; height:100%; place-items:center;
  font-family:var(--f-pixel); font-size:2.2rem; font-weight:700; color:var(--amber); background:var(--void-2); }
.foto-legenda{ font-family:var(--f-mono); font-size:.74rem; color:var(--case-ink);
  padding:11px 4px 13px; line-height:1.5; }
.foto-legenda b{ color:#6B5A2E; font-weight:600; }

/* ═══════════════════════════════════════════════════
   INVENTÁRIO (stack)
   ═══════════════════════════════════════════════════ */
.inv{ display:grid; grid-template-columns:repeat(auto-fit,minmax(238px,1fr)); gap:16px; }
.slot{
  background:var(--panel); border:1px solid var(--line); border-radius:4px; padding:24px 22px;
  position:relative; transition:transform .2s var(--ease), border-color .2s, background .2s;
}
.slot::before{
  content:''; position:absolute; top:-1px; left:-1px; width:9px; height:9px;
  border-top:2px solid var(--amber); border-left:2px solid var(--amber);
  opacity:0; transition:opacity .2s;
}
.slot::after{
  content:''; position:absolute; bottom:-1px; right:-1px; width:9px; height:9px;
  border-bottom:2px solid var(--amber); border-right:2px solid var(--amber);
  opacity:0; transition:opacity .2s;
}
.slot:hover{ transform:translateY(-4px); border-color:var(--line); background:var(--panel-2); }
.slot:hover::before,.slot:hover::after{ opacity:1; }
.slot .icone{ margin-bottom:16px; }
.slot .icone svg{ width:34px; height:34px; }
.slot h3{ font-family:var(--f-pixel); font-size:1.14rem; line-height:1.3; color:var(--ink);
  font-weight:700; margin-bottom:14px; }
.slot ul{ list-style:none; }
.slot li{ font-size:.86rem; color:var(--ink-2); padding:4px 0 4px 18px; position:relative; }
.slot li::before{ content:'▪'; position:absolute; left:0; color:var(--amber); }

/* ═══════════════════════════════════════════════════
   TRAJETO
   ═══════════════════════════════════════════════════ */
.trilha{ position:relative; padding-left:34px; }
.trilha::before{ content:''; position:absolute; left:8px; top:8px; bottom:8px; width:2px;
  background:repeating-linear-gradient(180deg, var(--amber) 0 5px, transparent 5px 10px); opacity:.5; }
.ponto{ position:relative; padding-bottom:38px; }
.ponto:last-child{ padding-bottom:0; }
.ponto::before{
  content:''; position:absolute; left:-34px; top:7px; width:18px; height:18px;
  background:var(--amber); border:4px solid var(--void); border-radius:2px;
  box-shadow:0 0 0 2px var(--amber);
}
.ponto .quando{ font-family:var(--f-crt); font-size:1.15rem; color:var(--amber); letter-spacing:.04em; }
.ponto h3{ font-family:var(--f-mono); font-size:1.02rem; font-weight:600; color:var(--ink); margin:4px 0 2px; }
.ponto .onde{ font-size:.86rem; color:var(--amber-2); margin-bottom:8px; }
.ponto p{ font-size:.93rem; }
.ponto a{ color:var(--amber); border-bottom:1px dotted var(--amber-2); }
.ponto a:hover{ background:rgba(255,180,59,.12); }

/* ═══════════════════════════════════════════════════
   CARTUCHOS (projetos)
   ═══════════════════════════════════════════════════ */
.prateleira{ display:grid; grid-template-columns:repeat(auto-fill,minmax(288px,1fr)); gap:20px; }
.cart{
  background:var(--panel-2); border-radius:5px 5px 3px 3px; padding:12px 12px 0;
  cursor:pointer; display:flex; flex-direction:column; position:relative;
  box-shadow:0 3px 0 #100D18, 0 18px 34px -22px #000;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
  border:1px solid var(--line);
}
.cart:hover, .cart:focus-visible{ transform:translateY(-7px); box-shadow:0 3px 0 #100D18, 0 26px 40px -20px #000; }
.cart .grade{ display:flex; gap:5px; padding:0 4px 11px; }
.cart .grade i{ flex:1; height:7px; background:var(--void); border-radius:1px; }
.cart-etiq{
  background:var(--case); border-radius:3px; padding:18px 16px 16px; flex-grow:1;
  display:flex; flex-direction:column; box-shadow:inset 0 2px 0 rgba(255,255,255,.5);
}
.cart-tipo{ font-family:var(--f-pixel); font-size:.78rem; font-weight:600; line-height:1.5; letter-spacing:.1em;
  color:#7A6A42; margin-bottom:11px; }
.cart-etiq h3{ font-family:var(--f-mono); font-size:1.06rem; font-weight:600; color:var(--case-ink);
  line-height:1.3; margin-bottom:9px; }
.cart-etiq .res{ font-size:.83rem; color:#5B4E33; line-height:1.55; flex-grow:1; }
.cart-tags{ list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.cart-tags li{ font-family:var(--f-mono); font-size:.66rem; color:#6B5A2E;
  border:1px solid rgba(51,41,26,.28); padding:3px 7px; border-radius:2px; }
.cart-rodape{
  display:flex; align-items:center; justify-content:space-between;
  padding:11px 5px 13px; font-family:var(--f-mono); font-size:.74rem; color:var(--ink-3);
}
.cart:hover .cart-rodape .ler{ color:var(--amber); }
.cart-rodape .ler{ transition:color .2s; }

/* ═══════════════════════════════════════════════════
   MODAL
   ═══════════════════════════════════════════════════ */
.modal{ position:fixed; inset:0; z-index:2000; display:none; background:rgba(8,6,12,.86);
  padding:24px; overflow-y:auto; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.modal.aberto{ display:flex; align-items:flex-start; justify-content:center; }
.modal-cx{
  background:var(--void-2); border:1px solid var(--line); border-radius:5px;
  max-width:740px; width:100%; margin:auto; position:relative;
  animation:sobe .3s var(--ease);
}
@keyframes sobe{ from{ opacity:0; transform:translateY(20px) } to{ opacity:1; transform:none } }
.modal-barra{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  background:var(--case); padding:9px 10px 9px 15px; border-radius:4px 4px 0 0;
}
.modal-barra .t{ font-family:var(--f-mono); font-size:.8rem; font-weight:600; color:var(--case-ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fechar{ width:26px; height:26px; display:grid; place-items:center; border-radius:2px;
  background:var(--case-2); color:var(--case-ink); font-family:var(--f-mono); font-size:.9rem; line-height:1;
  box-shadow:0 2px 0 var(--case-3); flex-shrink:0; }
.fechar:hover{ background:var(--pink); color:#fff; }
.modal-corpo{ padding:30px 32px 34px; }
.modal-corpo h2{ font-family:var(--f-pixel); font-size:1.8rem; line-height:1.2; color:var(--ink);
  font-weight:700; margin-bottom:10px; }
.modal-corpo .mtipo{ font-family:var(--f-crt); font-size:1.1rem; color:var(--amber); margin-bottom:20px; }
.modal-corpo h4{
  font-family:var(--f-pixel); font-size:1.06rem; line-height:1.4; color:var(--amber);
  font-weight:700; margin:28px 0 12px; display:flex; align-items:center; gap:10px;
}
.modal-corpo h4::before{ content:''; width:9px; height:9px; background:var(--amber); flex-shrink:0; }
.modal-corpo p{ font-size:.93rem; margin-bottom:12px; }
.modal-corpo strong{ color:var(--ink); font-weight:600; }
.modal-corpo code{ font-family:var(--f-mono); color:var(--amber); background:var(--panel);
  padding:2px 6px; border-radius:3px; font-size:.86em; }
.modal-tags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }
.modal-tags .tg{ font-family:var(--f-mono); font-size:.72rem; color:var(--ink-2);
  border:1px solid var(--line); background:var(--panel); padding:5px 10px; border-radius:2px; }
.modal-links{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }

/* ═══════════════════════════════════════════════════
   CONTATO + RODAPÉ
   ═══════════════════════════════════════════════════ */
.contato{ text-align:center; padding:64px 0 96px; }
.contato .caminho{ text-align:center; }
.contato h2{ font-family:var(--f-pixel); font-size:clamp(1.9rem,5.2vw,2.9rem); line-height:1.2;
  color:var(--ink); font-weight:700; margin-bottom:20px; }
.contato p{ max-width:52ch; margin:0 auto 34px; }
.contato-acoes{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
.email-btn{ position:relative; }
.copiado{
  position:absolute; top:-38px; left:50%; transform:translateX(-50%);
  font-family:var(--f-mono); font-size:.74rem; color:var(--void); background:var(--mint);
  padding:5px 11px; border-radius:3px; white-space:nowrap; opacity:0; pointer-events:none;
  transition:opacity .2s, transform .2s;
}
.email-btn.mostra .copiado{ opacity:1; transform:translateX(-50%) translateY(-4px); }

footer{ border-top:1px solid var(--line-soft); padding:30px 0 40px; }
.foot-int{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:center;
  text-align:center; font-size:.78rem; color:var(--ink-3); }
.foot-int a{ color:var(--ink-2); }
.foot-int a:hover{ color:var(--amber); }

/* ═══════════════════════════════════════════════════
   TERMINAL
   ═══════════════════════════════════════════════════ */
#term{
  position:fixed; left:0; right:0; bottom:0; z-index:1500;
  transform:translateY(102%); transition:transform .32s var(--ease);
  padding:0 16px 16px; pointer-events:none;
}
#term.aberto{ transform:none; pointer-events:auto; }
.term-cx{
  max-width:var(--maxw); margin:0 auto; background:#0B0910;
  border:1px solid var(--line); border-top:none; border-radius:0 0 5px 5px;
  box-shadow:0 -18px 50px -18px rgba(0,0,0,.95);
  display:flex; flex-direction:column; max-height:min(66vh,540px);
}
.term-barra{
  background:var(--case); padding:8px 10px 8px 14px; display:flex; align-items:center;
  justify-content:space-between; gap:12px; flex-shrink:0; border-radius:4px 4px 0 0;
}
.term-barra .tt{ font-family:var(--f-mono); font-size:.76rem; font-weight:600; color:var(--case-ink); }
.term-saida{
  flex:1; overflow-y:auto; padding:16px 18px 8px;
  font-family:var(--f-crt); font-size:1.16rem; line-height:1.34; color:var(--ink-2);
  overscroll-behavior:contain;
}
.term-saida .l{ white-space:pre-wrap; word-break:break-word; }
.term-saida .am{ color:var(--amber); }
.term-saida .mi{ color:var(--mint); }
.term-saida .ro{ color:var(--pink); }
.term-saida .be{ color:var(--case); }
.term-saida .esc{ color:var(--ink-3); }
.term-saida a{ color:var(--amber); border-bottom:1px dotted var(--amber-2); }
.term-saida .eco{ color:var(--mint); }
.term-chips{ display:flex; gap:7px; padding:8px 14px 0; overflow-x:auto; flex-shrink:0;
  scrollbar-width:none; }
.term-chips::-webkit-scrollbar{ display:none; }
.chip{
  font-family:var(--f-mono); font-size:.74rem; color:var(--amber); white-space:nowrap;
  border:1px solid var(--line); background:var(--panel); padding:6px 11px; border-radius:3px;
}
.chip:hover{ border-color:var(--amber); background:var(--panel-2); }
.term-entrada{ display:flex; align-items:center; gap:9px; padding:10px 16px 14px; flex-shrink:0; }
.term-entrada .ps{ font-family:var(--f-crt); font-size:1.16rem; color:var(--mint); flex-shrink:0; }
.term-entrada input{
  flex:1; background:none; border:none; outline:none; caret-color:var(--amber);
  font-family:var(--f-crt); font-size:1.16rem; color:var(--ink);
}
.term-entrada input::placeholder{ color:var(--ink-3); }

/* jogo */
.jogo{ font-family:var(--f-crt); font-size:1.15rem; line-height:1.05; letter-spacing:.3em;
  white-space:pre; margin:8px 0; }
.jogo .pt{ color:#2A2438; }
.jogo .co{ color:var(--mint); }
.jogo .fr{ color:var(--pink); }
.jogo .placar{ letter-spacing:normal; color:var(--amber); display:block; margin-bottom:6px; }

/* modo arcade (konami) */
html[data-arcade="on"] .pagina{ animation:tremeleve 6s linear infinite; }
@keyframes tremeleve{ 0%,100%{ filter:hue-rotate(0) } 50%{ filter:hue-rotate(22deg) } }
.faisca{ position:fixed; width:8px; height:8px; z-index:2500; pointer-events:none; }

/* ═══════════════════════════════════════════════════
   RESPONSIVO
   ═══════════════════════════════════════════════════ */
@media (max-width:940px){
  .heroi-grid{ grid-template-columns:1fr; gap:44px; }
  .monitor{ max-width:520px; margin:0 auto; width:100%; }
  .sobre-grid{ grid-template-columns:1fr; gap:40px; }
  .foto-caixa{ max-width:300px; }
}
@media (max-width:820px){
  .hamb{ display:block; order:3; }
  .head-fer{ order:2; }
  .abre-term{ width:34px; height:34px; padding:0; justify-content:center; }
  .abre-term .lbl, .abre-term kbd{ display:none; }
  .abre-term .ico{ display:block; }
  .dica-term kbd, .so-desk{ display:none; }
  .so-mob{ display:inline; color:var(--amber); }
  nav.principal{
    position:fixed; inset:0; background:rgba(15,13,20,.97);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none; transition:opacity .25s;
  }
  body.menu-aberto nav.principal{ opacity:1; pointer-events:auto; }
  .menu{ flex-direction:column; gap:10px; }
  .menu a{ font-family:var(--f-pixel); font-size:1.32rem; font-weight:600; padding:12px 20px; }
  .menu a.aqui::before{ display:none; }
}
@media (max-width:640px){
  body{ font-size:15px; }
  .secao{ padding:78px 0; }
  .wrap{ padding:0 18px; }
  .heroi{ padding-top:calc(var(--head-h) + 26px); }
  .heroi h1{ text-shadow:3px 3px 0 rgba(255,180,59,.17); }
  .monitor-tela{ min-height:0; padding:16px 14px; font-size:1.04rem; }
    .modal{ padding:12px; }
  .modal-corpo{ padding:24px 20px 28px; }
  .botao{ font-size:.94rem; padding:14px 17px; }
  .heroi-acoes .botao{ flex:1 1 100%; justify-content:center; }
  #term{ padding:0; }
  .term-cx{ border-radius:0; max-height:78vh; }
  .term-saida, .term-entrada input, .term-entrada .ps{ font-size:1.08rem; }
  .contato{ padding:88px 0 72px; }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
  .surge{ opacity:1 !important; transform:none !important; }
  .crt::before{ display:none; }
}