:root {
  --fundo: #000310;
  --verde: #2f5fe6;
  --verde-claro: #4d78f0;
  --texto: #d7dcd9;
  --texto-2: #8b948f;
  --ui-font: "Geist", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", Consolas, "Courier New", monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--ui-font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.em-intro { overflow: hidden; }
button { font: inherit; }

/* ---------- topo com o nome em 3D ---------- */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 420px;
  overflow: hidden;
}
#palco { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.nome-texto {
  /* nome em texto para leitores de tela; vira o nome visível só quando não há 3D */
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0;
}
.sem-3d .nome-texto {
  position: absolute; left: 0; right: 0; top: 34%; width: auto; height: auto; clip: auto;
  text-align: center; font: 600 clamp(48px, 11vw, 150px)/1 var(--ui-font); letter-spacing: -0.02em;
  color: #e9ecea; text-shadow: 0 2px 0 var(--verde);
}

.hero-txt {
  position: absolute; left: 16px; right: 16px;
  top: var(--txt-top, 62%);
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  text-align: center;
  opacity: 0; transform: translateY(10px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
}
.pronto .hero-txt { opacity: 1; transform: none; pointer-events: auto; }
.frase {
  margin: 0; font-size: clamp(16px, 1.45vw, 21px); line-height: 1.45; color: var(--texto);
  max-width: 44ch; text-wrap: balance;
}
.btn {
  display: inline-block; padding: 13px 22px; border-radius: 4px;
  background: var(--verde); color: #fff; font-weight: 600; font-size: 15px; text-decoration: none;
  transition: background-color .2s;
}
.btn:hover { background: var(--verde-claro); }
.btn:focus-visible, .rever:focus-visible, .pular:focus-visible { outline: 2px solid var(--verde-claro); outline-offset: 3px; }

.rever {
  position: absolute; left: 20px; bottom: 18px; padding: 6px 0;
  background: none; border: 0; color: #5f6964; font: 12px var(--mono); cursor: pointer;
  opacity: 0; transition: opacity .6s .4s, color .2s;
}
.pronto .rever { opacity: 1; }
.rever:hover { color: var(--texto); }
.sem-intro-rever .rever { display: none; }

/* ---------- abertura ---------- */
.intro { position: fixed; inset: 0; z-index: 10; background: #000; overflow: hidden; cursor: default; }
.intro.transparente { background: transparent; }
.intro.saindo { opacity: 0; transition: opacity .35s ease; pointer-events: none; }

.cena { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity .7s ease; }
.cena.visivel { opacity: 1; }
.mundo { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.foto { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; user-select: none; }
.monitor { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; }
.monitor.foco { filter: blur(.6px) brightness(.92); }
.cabeca { position: absolute; transform-origin: 50% 100%; pointer-events: none; }

.cursor-inicial {
  position: absolute; left: 50%; top: 50%; width: 11px; height: 22px; margin: -11px 0 0 -5px;
  background: var(--verde); animation: pisca 1s steps(1) infinite; transition: opacity .3s;
}
.cursor-inicial.some { opacity: 0; animation: none; }
@keyframes pisca { 50% { opacity: 0; } }

.editor-cheio { position: absolute; inset: 0; opacity: 0; transition: opacity .18s linear; }
.editor-cheio.visivel { opacity: 1; }

.flash {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at 50% 60%, rgba(225,233,255,.9), rgba(47,95,230,.35) 45%, rgba(0,0,0,0) 75%);
  mix-blend-mode: screen;
}
.flash.on { animation: flash .42s ease-out; }
@keyframes flash { 0% { opacity: 0; } 18% { opacity: .55; } 100% { opacity: 0; } }

.tecla {
  position: absolute; right: 5vw; bottom: 12vh; z-index: 3;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 20px 15px; border-radius: 8px;
  font: 600 15px var(--ui-font); color: #e6e9e7; letter-spacing: .01em;
  background: linear-gradient(#2c3034, #1c1f22);
  border: 1px solid #3b4045;
  box-shadow: 0 5px 0 #0b0c0d, 0 14px 30px rgba(0,0,0,.55);
  opacity: 0; transform: translateY(14px) scale(.96);
  transition: opacity .18s ease, transform .18s ease, box-shadow .08s ease;
  pointer-events: none;
}
.tecla.visivel { opacity: 1; transform: none; }
.tecla.apertada { transform: translateY(4px); box-shadow: 0 1px 0 #0b0c0d, 0 0 26px rgba(47,95,230,.55); border-color: #3b5fc4; }
.tecla.sai { opacity: 0; transition: opacity .3s ease; }

.pular {
  position: absolute; top: 14px; right: 16px; z-index: 5;
  padding: 8px 4px; background: none; border: 0; cursor: pointer;
  color: #9aa39e; font: 500 13px var(--ui-font); letter-spacing: .02em;
  text-decoration: underline; text-decoration-color: rgba(154,163,158,.35); text-underline-offset: 4px;
}
.pular:hover { color: #fff; }

/* ---------- editor (imitação do VS Code) ---------- */
.vsc {
  --fs: 16px; --ui: 12px; --lh: calc(var(--fs) * 1.5);
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  display: flex; flex-direction: column; overflow: hidden;
  background: #1f1f1f; color: #cccccc;
  font: var(--ui)/1.4 var(--ui-font);
  transition: background-color .5s ease;
}
.vsc * { transition: background-color .5s ease, border-color .5s ease, opacity .35s ease; }
.vsc svg { display: block; }

.vsc-titulo {
  flex: none; height: calc(var(--ui) * 2.8); display: flex; align-items: center; gap: calc(var(--ui) * 1.2);
  padding-left: calc(var(--ui) * .9); background: #181818; border-bottom: 1px solid #2b2b2b; color: #9d9d9d;
}
.vsc-marca { width: calc(var(--ui) * 1.3); height: calc(var(--ui) * 1.3); color: var(--verde); }
.vsc-menu { display: flex; gap: calc(var(--ui) * 1.05); white-space: nowrap; }
.vsc-busca {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 34%; height: calc(var(--ui) * 1.95); display: flex; align-items: center; justify-content: center; gap: .5em;
  background: #222; border: 1px solid #353535; border-radius: 6px; color: #9d9d9d;
}
.vsc-titulo { position: relative; }
.vsc-janela { margin-left: auto; display: flex; height: 100%; }
.vsc-janela span { width: calc(var(--ui) * 3.6); display: grid; place-items: center; color: #b5b5b5; }

.vsc-corpo { flex: 1; display: flex; min-height: 0; }
.vsc-atividade {
  flex: none; width: calc(var(--ui) * 3.7); display: flex; flex-direction: column; align-items: center;
  gap: calc(var(--ui) * 1.25); padding-top: calc(var(--ui) * .9);
  background: #181818; border-right: 1px solid #2b2b2b; color: #868686;
}
.vsc-atividade span { position: relative; width: 100%; display: grid; place-items: center; }
.vsc-atividade span.ativo { color: #fff; }
.vsc-atividade span.ativo::before { content: ""; position: absolute; left: 0; top: -15%; bottom: -15%; width: 2px; background: #fff; }
.vsc-atividade svg { width: calc(var(--ui) * 1.85); height: calc(var(--ui) * 1.85); }

.vsc-lateral { flex: none; width: calc(var(--ui) * 18); background: #181818; border-right: 1px solid #2b2b2b; overflow: hidden; }
.vsc-lateral h4 {
  margin: 0; height: calc(var(--ui) * 2.9); display: flex; align-items: center; justify-content: space-between;
  padding: 0 1em 0 1.6em; font-size: calc(var(--ui) * .92); font-weight: 400; letter-spacing: .04em; color: #bbb;
}
.vsc-arvore div { height: calc(var(--ui) * 1.85); display: flex; align-items: center; gap: .45em; white-space: nowrap; color: #c5c5c5; }
.vsc-arvore .pasta-raiz { font-weight: 600; font-size: calc(var(--ui) * .92); letter-spacing: .03em; padding-left: .6em; }
.vsc-arvore .sel { background: #37373d; box-shadow: inset 1px 0 0 #0078d4; color: #fff; }
.vsc-arvore b { font-weight: 400; color: #8b8b8b; width: .8em; text-align: center; }
.ico-js { font: 700 calc(var(--ui) * .78) var(--ui-font); color: #cbcb41; letter-spacing: -.02em; }
.ico-json { font: 700 calc(var(--ui) * .82) var(--mono); color: #cbcb41; }
.ico-md { color: #519aba; font-weight: 700; }

.vsc-principal { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.vsc-abas { flex: none; height: calc(var(--ui) * 2.95); display: flex; background: #181818; border-bottom: 1px solid #2b2b2b; }
.vsc-aba {
  display: flex; align-items: center; gap: .55em; padding: 0 .9em 0 1em; white-space: nowrap;
  border-right: 1px solid #2b2b2b; color: #9d9d9d; position: relative;
}
.vsc-aba.ativa { background: #1f1f1f; color: #fff; margin-bottom: -1px; }
.vsc-aba.ativa::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--verde); }
.vsc-aba .x { width: 1.2em; text-align: center; color: #cccccc; font-size: 1.1em; }
.vsc-trilha { flex: none; height: calc(var(--ui) * 1.9); display: flex; align-items: center; gap: .45em; padding: 0 1.3em; color: #a9a9a9; white-space: nowrap; }
.vsc-trilha i { font-style: normal; color: #6f6f6f; }

.vsc-area {
  flex: 1; min-height: 0; display: flex; position: relative; overflow: hidden;
  font-family: var(--mono); font-size: var(--fs); line-height: var(--lh); font-variant-ligatures: none;
  padding-top: calc(var(--lh) * .15);
}
.vsc-numeros { flex: none; width: 6ch; padding-right: 2.2ch; text-align: right; color: #6e7681; }
.vsc-numeros div, .vsc-linhas div { height: var(--lh); }
.vsc-numeros .atual { color: #cccccc; }
.vsc-codigo { flex: 1; position: relative; white-space: pre; min-width: 0; }
.vsc-linhas .atual { box-shadow: inset 0 0 0 1px #2a2a2a; margin-left: -2px; padding-left: 2px; }
.vsc-cursor {
  position: absolute; left: calc(var(--c, 0) * 1ch); top: calc(var(--l, 0) * var(--lh));
  width: 2px; height: var(--lh); background: #aeafad;
}
.vsc-cursor.pisca { animation: pisca 1.05s steps(1) infinite; }
.vsc-mapa { flex: none; width: calc(var(--ui) * 7.5); position: relative; padding-top: 2px; box-shadow: inset 1px 0 0 #262626; }
.vsc-mapa div { height: 3px; margin-bottom: 1px; display: flex; gap: 2px; padding-left: 6px; }
.vsc-mapa i { height: 2px; opacity: .55; }
.vsc-mapa::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 22%; background: rgba(121,121,121,.1); }

.t-ctl { color: #c586c0; } .t-kw { color: #569cd6; } .t-str { color: #ce9178; } .t-fn { color: #dcdcaa; }
.t-var { color: #9cdcfe; } .t-cst { color: #4fc1ff; } .t-prop { color: #9cdcfe; } .t-pun { color: #d4d4d4; }
.t-com { color: #6a9955; } .t-b0 { color: #ffd700; } .t-b1 { color: #da70d6; } .t-b2 { color: #179fff; }
.q { display: inline-block; }

.vsc-sugestao {
  position: absolute; z-index: 2; display: none;
  left: calc(var(--sc, 0) * 1ch - 1.9em); top: calc((var(--sl, 0) + 1) * var(--lh));
  min-width: 30ch; background: #202020; border: 1px solid #454545; border-radius: 3px;
  box-shadow: 0 6px 18px rgba(0,0,0,.45); font-size: calc(var(--fs) * .9);
}
.vsc-sugestao.on { display: block; }
.vsc-sugestao div { display: flex; align-items: center; gap: .6em; height: calc(var(--lh) * 1.02); padding: 0 .6em; color: #cccccc; white-space: nowrap; }
.vsc-sugestao div.sel { background: #04395e; box-shadow: inset 0 0 0 1px #2b79d8; color: #fff; }
.vsc-sugestao em { font-style: normal; color: #2aaaff; font-weight: 600; }
.vsc-sugestao small { margin-left: auto; padding-left: 2ch; color: #8b8b8b; font-size: .88em; }
.vsc-sugestao svg { width: 1.05em; height: 1.05em; flex: none; }

.vsc-painel { flex: none; height: 0; overflow: hidden; border-top: 1px solid #2b2b2b; background: #181818; transition: height .26s cubic-bezier(.2,.7,.2,1), background-color .5s; }
.vsc-painel.aberto { height: 31%; }
.vsc-painel-abas { display: flex; gap: calc(var(--ui) * 1.7); height: calc(var(--ui) * 2.8); align-items: center; padding: 0 1.6em; font-size: calc(var(--ui) * .9); letter-spacing: .03em; color: #8b8b8b; white-space: nowrap; }
.vsc-painel-abas .ativa { color: #e7e7e7; box-shadow: 0 calc(var(--ui) * .55) 0 -.5px #e7e7e7; padding-bottom: 2px; }
.vsc-terminal { margin: 0; padding: .3em 1.4em; font: calc(var(--fs) * .88)/1.55 var(--mono); color: #cccccc; white-space: pre; }
.vsc-terminal .ps { color: #cccccc; }
.vsc-terminal .cinza { color: #8b8b8b; }
.vsc-terminal .ok { color: #23d18b; }
.vsc-terminal .cur { display: inline-block; width: .6em; height: 1.15em; vertical-align: -.2em; background: #cccccc; }

.vsc-status {
  flex: none; height: calc(var(--ui) * 1.95); display: flex; align-items: center; gap: 1.1em;
  padding-right: 1em; background: #181818; border-top: 1px solid #2b2b2b; color: #b8b8b8;
  font-size: calc(var(--ui) * .92); white-space: nowrap;
}
.vsc-status .remoto { height: 100%; display: grid; place-items: center; padding: 0 .85em; background: var(--verde); color: #fff; }
.vsc-status .dir { margin-left: auto; display: flex; gap: 1.3em; }

/* versão estreita (celular em pé) */
.vsc.compacto .vsc-titulo, .vsc.compacto .vsc-atividade, .vsc.compacto .vsc-lateral, .vsc.compacto .vsc-mapa,
.vsc.compacto .vsc-aba + .vsc-aba, .vsc.compacto .so-largo { display: none; }
.vsc.compacto .vsc-numeros { width: 4ch; padding-right: 1.4ch; }
.vsc.compacto .vsc-sugestao { min-width: 0; }
.vsc.compacto .vsc-sugestao small { display: none; }
.vsc.compacto .vsc-painel.aberto { height: 27%; }
.vsc.compacto .vsc-painel-abas { padding: 0 1.2em; }
.vsc.compacto .vsc-terminal { padding: .3em 1.1em; }

/* desabando: some a moldura do editor e o fundo fica transparente */
.vsc.desabando { background-color: transparent; }
.vsc.desabando .vsc-titulo, .vsc.desabando .vsc-atividade, .vsc.desabando .vsc-lateral, .vsc.desabando .vsc-abas,
.vsc.desabando .vsc-trilha, .vsc.desabando .vsc-numeros, .vsc.desabando .vsc-mapa, .vsc.desabando .vsc-status,
.vsc.desabando .vsc-painel-abas, .vsc.desabando .vsc-cursor, .vsc.desabando .vsc-linhas .atual { opacity: 0; }
.vsc.desabando .vsc-painel { background-color: transparent; border-color: transparent; }
.vsc.desabando .vsc-cursor { visibility: hidden; animation: none; }
.vsc.desabando .vsc-linhas .atual { box-shadow: none; }

@media (max-width: 640px) {
  .tecla { right: 50%; transform: translate(50%, 14px) scale(.96); bottom: 16vh; }
  .tecla.visivel { transform: translate(50%, 0); }
  .tecla.apertada { transform: translate(50%, 4px); }
  .rever { left: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-txt { transition: none; transform: none; }
}

/* ---------- logo em 3D (render pronto, animado no próprio site) ---------- */
.logo-palco { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; pointer-events: none; perspective: 1400px; }
.logo-giro { flex: none; margin-top: -10vh; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.logo-caixa {
  position: relative; width: min(1400px, 118vw);
  opacity: 0; transform: translateY(-70vh) scale(.92); filter: blur(10px) brightness(1.6);
}
.logo3d {
  display: block; width: 100%; height: auto;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, #000 55%, transparent 100%);
          mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, #000 55%, transparent 100%);
}
/* faixa de luz que corre só nas partes acesas da logo */
.logo-luz {
  position: absolute; inset: 0; mix-blend-mode: screen; opacity: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(170,200,255,.25) 44%, rgba(235,242,255,1) 50%, rgba(170,200,255,.25) 56%, transparent 62%) no-repeat;
  background-size: 260% 100%; background-position: 130% 0;
  -webkit-mask: url(logo-nexus-3d.webp?v=2) center / 100% 100% luminance; mask: url(logo-nexus-3d.webp?v=2) center / 100% 100% luminance;
}
.logo-brilho {
  position: absolute; left: 50%; top: 40%; width: 60vw; height: 30vh; margin-left: -30vw;
  background: radial-gradient(ellipse at center, rgba(70,120,255,.55), rgba(47,95,230,0) 70%);
  opacity: 0; mix-blend-mode: screen;
}
.logo-cai .logo-caixa { animation: logoCai 1.15s cubic-bezier(.3,1.35,.45,1) forwards, logoVive 6s 1.2s ease-in-out infinite; }
.logo-cai .logo-brilho { animation: logoBrilho 1.4s .55s ease-out forwards; }
.logo-cai .logo-luz { animation: logoLuz 4.5s 1.1s ease-in-out infinite; }
.logo-parada .logo-caixa { opacity: 1; transform: none; filter: none; }
@keyframes logoCai {
  0% { opacity: 0; transform: translateY(-70vh) scale(.92); filter: blur(10px) brightness(1.6); }
  35% { opacity: 1; }
  60% { transform: translateY(1.5vh) scale(1.01); filter: blur(0) brightness(1.25); }
  100% { opacity: 1; transform: none; filter: none; }
}
/* depois de assentar: flutua de leve e o brilho respira */
@keyframes logoVive {
  0%, 100% { opacity: 1; transform: translateY(0); filter: brightness(1); }
  50% { opacity: 1; transform: translateY(-1.2vh); filter: brightness(1.18) saturate(1.1); }
}
@keyframes logoLuz {
  0% { opacity: 1; background-position: 130% 0; }
  45%, 100% { opacity: 1; background-position: -30% 0; }
}
@keyframes logoBrilho { 0% { opacity: 0; transform: scale(.6); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.6); } }
@media (max-aspect-ratio: 1/1) { .logo-caixa { width: 135vw; } .logo-giro { margin-top: -14vh; } }
@media (prefers-reduced-motion: reduce) { .logo-luz { display: none; } }

/* ---------- seções do site ---------- */
.conteudo { position: relative; background: var(--fundo); }
.bloco { max-width: 1120px; margin: 0 auto; padding: clamp(56px, 8vw, 96px) 20px; border-top: 1px solid #12203a; display: grid; grid-template-columns: 1fr 2fr; gap: 24px 64px; }
.bloco-titulo { margin: 0; font: 600 15px/1.4 var(--ui-font); color: #8fa3d6; letter-spacing: .01em; }
.bloco-corpo { max-width: 680px; }
.bloco p, .bloco dd, .bloco li { color: #b4bdd1; font-size: 17px; line-height: 1.65; margin: 0; }

.ficha { margin: 0; }
.ficha > div { display: grid; grid-template-columns: 190px 1fr; gap: 8px 28px; padding: 22px 0; border-bottom: 1px solid #12203a; }
.ficha > div:first-child { padding-top: 0; }
.ficha dt { font: 600 18px/1.4 var(--ui-font); color: #f1f4fb; }
.ficha dd { margin: 0; }

.destaque { font: 500 clamp(22px, 2.4vw, 30px)/1.35 var(--ui-font) !important; color: #f1f4fb !important; letter-spacing: -.01em; }
.fatos { margin: 26px 0 28px; padding: 0; list-style: none; }
.fatos li { padding: 12px 0 12px 22px; border-top: 1px solid #12203a; position: relative; }
.fatos li:last-child { border-bottom: 1px solid #12203a; }
.fatos li::before { content: ""; position: absolute; left: 0; top: 24px; width: 8px; height: 2px; background: var(--verde-claro); }
.link-seta { color: #f1f4fb; font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--verde); padding-bottom: 3px; }
.link-seta span { color: var(--verde-claro); display: inline-block; transition: transform .25s ease; }
.link-seta:hover span { transform: translateX(5px); }

.etapas { margin: 0; padding: 0; list-style: none; counter-reset: etapa; }
.etapas li { counter-increment: etapa; padding: 18px 0 18px 46px; border-bottom: 1px solid #12203a; position: relative; }
.etapas li:first-child { padding-top: 0; }
.etapas li::before { content: counter(etapa); position: absolute; left: 0; top: 18px; font: 500 14px var(--mono); color: var(--verde-claro); }
.etapas li:first-child::before { top: 0; }
.etapas b { color: #f1f4fb; font-weight: 600; }
.tecnologias { color: #b4bdd1; }

.contato { max-width: 1120px; margin: 0 auto; padding: clamp(70px, 10vw, 120px) 20px; border-top: 1px solid #12203a; }
.contato h2 { margin: 0 0 14px; font: 600 clamp(30px, 4vw, 48px)/1.12 var(--ui-font); letter-spacing: -.02em; color: #f1f4fb; max-width: 20ch; }
.contato p { margin: 0 0 28px; color: #b4bdd1; font-size: 18px; }
.rodape { max-width: 1120px; margin: 0 auto; padding: 24px 20px 36px; display: flex; justify-content: space-between; border-top: 1px solid #12203a; color: #5f6b86; font-size: 13px; }

@media (max-width: 820px) {
  .bloco { grid-template-columns: 1fr; gap: 20px; }
  .ficha > div { grid-template-columns: 1fr; }
}

/* ---------- trabalhos ---------- */
.trabalhos { max-width: 1240px; margin: 0 auto; padding: clamp(70px, 9vw, 120px) 20px clamp(50px, 7vw, 90px); }
.trabalhos-topo { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; margin-bottom: 36px; }
.trabalhos-topo h2 { margin: 0; font: 600 clamp(32px, 4vw, 48px)/1.1 var(--ui-font); letter-spacing: -.02em; color: #f1f4fb; }
.trabalhos-topo p { margin: 0; color: #8fa3d6; font-size: 16px; }
.grade { display: grid; grid-template-columns: 1fr 1fr; gap: 44px 28px; }
.trab { display: block; color: inherit; text-decoration: none; }
.trab img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 3px; border: 1px solid #12203a; transition: transform .5s cubic-bezier(.2,.7,.2,1), border-color .3s; }
a.trab:hover img { transform: translateY(-4px); border-color: var(--verde); }
.trab-info { padding-top: 16px; }
.trab h3 { margin: 0 0 6px; font: 600 21px/1.25 var(--ui-font); color: #f1f4fb; }
.trab-tipo { display: block; margin-bottom: 10px; font: 500 12px var(--mono); color: #7f93c8; letter-spacing: .02em; }
.trab p { margin: 0; color: #b4bdd1; font-size: 16px; line-height: 1.6; max-width: 52ch; }
@media (max-width: 760px) { .grade { grid-template-columns: 1fr; } }