/* Etapa 3 · Equipe: pixels migram do preto para o branco; cartões "executar *.exe"; painel com retrato em pixel */
.pixels { position: relative; height: 168px; background: #fff; }
.pixels canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.equipe { --mono: Menlo, ui-monospace, monospace; position: relative; background: #fff; color: #000; padding: 20px var(--gutter) 64px; overflow: hidden; }
.equipe.ampliada { padding-bottom: 120px; }
.equipe-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
.equipe h2 { font-family: "Space Grotesk", sans-serif; font-weight: 500; font-size: clamp(20px, 1.8vw, 28px); letter-spacing: -0.02em; transition: font-size .3s; }
.equipe.ampliada h2 { font-size: clamp(28px, 3.2vw, 48px); }
.equipe-topo { margin-bottom: 24px; }
.equipe.ampliada .equipe-topo { margin-bottom: 40px; }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: .02em; color: #555; }
.mono b { color: #000; font-weight: 400; background: var(--verde); padding: 0 4px; }

/* cartões recolhidos */
/* recolhida: os 6 ícones ocupam a largura toda, de canto a canto, bem espaçados */
.membros { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(20px, 3vw, 44px); }
.membro { all: unset; cursor: pointer; display: block; }
.membro canvas { width: 100%; aspect-ratio: 1; display: block; background: #000; }
.membro .linha-exe { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 10px; font-family: var(--mono); font-size: 11px; color: #222; white-space: nowrap; }
.membro .linha-exe > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.membro:focus-visible { outline: 2px solid #000; outline-offset: 6px; }
.membro { position: relative; }
.membro.vaga { cursor: default; }
.membro .carregando { position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; color: #9a9a9a; pointer-events: none; font-size: 10.5px; }
/* "carregando." → ".." → "..." e volta */
.carregando::after { content: ""; display: inline-block; width: 3ch; text-align: left; animation: pontos 1.2s steps(1) infinite; }
@keyframes pontos { 0% { content: "."; } 33% { content: ".."; } 66% { content: "..."; } }

/* teclinha ENTER / LOAD */
.tecla-mini {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px 2px; border-radius: 3px; background: #000; color: var(--verde);
  box-shadow: 0 3px 0 #444; transform: translateY(-2px); transition: transform .08s, box-shadow .08s;
  white-space: nowrap;
}
.membro:hover .tecla-mini, .membro:focus-visible .tecla-mini { transform: translateY(1px); box-shadow: 0 0 0 #444; }
.vaga .tecla-mini { background: #e6e6e6; color: #4d4d4d; box-shadow: 0 3px 0 #c9c9c9; position: relative; overflow: hidden; }
.vaga .tecla-mini::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 40%; background: var(--verde); animation: carregando 1.6s ease-in-out infinite; }
@keyframes carregando { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }

/* painel ampliado */
.painel { display: none; grid-template-columns: 1.1fr 1fr; gap: 0 48px; position: relative; }
.equipe.ampliada .membros, .equipe.ampliada .trabalhe { display: none; }
.trabalhe { position: absolute; right: var(--gutter); bottom: 22px; font-family: var(--mono); font-size: 11px; color: #6b6b6b; text-decoration: none; }
.trabalhe:hover, .trabalhe:focus-visible { color: #000; text-decoration: underline; text-decoration-color: var(--verde); text-underline-offset: 3px; }
.equipe.ampliada .painel { display: grid; animation: entra .5s ease both; }

.retrato { position: relative; height: clamp(300px, 26vw, 400px); } /* foto menor: o nome atrás respira mais */
.retrato .nome {
  position: absolute; left: 0; top: 6%; z-index: 1; margin: 0;
  font-family: "Space Grotesk", sans-serif; font-weight: 500; text-transform: uppercase;
  font-size: clamp(48px, 6vw, 100px); line-height: .86; letter-spacing: -0.035em;
}
.retrato canvas { position: absolute; z-index: 2; right: -4%; bottom: 0; height: 100%; cursor: crosshair; }

.info { padding-top: 8px; display: flex; flex-direction: column; gap: 20px; }
.info-topo { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.fechar { all: unset; cursor: pointer; }
.fechar:focus-visible { outline: 2px solid #000; outline-offset: 4px; border-radius: 3px; }
.cargo { font-family: "Space Grotesk", sans-serif; font-size: clamp(22px, 2vw, 30px); letter-spacing: -0.01em; }

.janela-txt { border: 1px solid #000; border-radius: 6px; }
.janela-txt .barra { display: flex; justify-content: space-between; align-items: center; padding: 5px 9px; border-bottom: 1px solid #000; font-family: var(--mono); font-size: 11px; }
.janela-txt .max { width: 8px; height: 8px; border: 1px solid #000; border-radius: 1px; }
.janela-txt p { padding: 14px 16px 16px; font-size: 15px; line-height: 1.55; font-weight: 400; color: #222; }

.colunas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
.colunas h3 { font-family: "Space Grotesk", sans-serif; font-weight: 500; font-size: 13px; letter-spacing: .28em; text-transform: uppercase; margin-bottom: 12px; }
.colunas ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-family: var(--mono); font-size: 12px; color: #222; }
.colunas li { display: flex; gap: 8px; align-items: baseline; }
.colunas li::before { content: ""; flex: none; width: 7px; height: 7px; background: var(--verde); outline: 1px solid #000; transform: translateY(-1px); }
.colunas li span { color: #888; }
.colunas .links { margin-top: 22px; }
.colunas .links li::before { background: #000; }
.colunas .links a { overflow-wrap: anywhere; color: #000; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s; }
.colunas .links a:hover { border-color: var(--verde); }
.sair { display: flex; align-items: center; gap: 12px; }
.sair .mono { color: #000; }
.sair button { all: unset; cursor: pointer; }
.sair .tecla-mini, .sair button { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px 2px; border-radius: 3px; background: #000; color: var(--verde); box-shadow: 0 3px 0 #444; transform: translateY(-2px); }
.sair button:hover, .sair button:focus-visible { transform: translateY(1px); box-shadow: none; }

.tags { grid-column: 1 / -1; overflow: hidden; border-top: 1px solid #000; border-bottom: 1px solid #000; padding: 12px 0; margin-top: 8px; }
.tags div { display: flex; gap: 48px; width: max-content; animation: corre 40s linear infinite; font-family: var(--mono); font-size: 13px; text-transform: uppercase; }
.tags i { font-style: normal; color: #000; }
.tags i::first-letter { background: var(--verde); }
@keyframes corre { to { transform: translateX(-50%); } }

@media (max-width: 900px) {
  .membros { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .painel { grid-template-columns: minmax(0, 1fr); } /* minmax(0): o e-mail longo e o canvas não alargam a coluna além da tela */
  .retrato { height: 280px; }
  .equipe-topo { flex-direction: column; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) { .tags div, .vaga .tecla-mini::after, .equipe.ampliada .painel, .carregando::after { animation: none; } }
@media (max-width: 560px) { .membros { grid-template-columns: repeat(2, 1fr); } .colunas { grid-template-columns: minmax(0, 1fr); gap: 20px; } .retrato { height: 210px; } .retrato canvas { right: -8%; } .info { gap: 16px; } }