/* Portfólio — Tom Scheer · estilo compartilhado (index + casos) */
:root{
  --bg:#121311; --painel:#1A1B18; --linha:#2B2C27; --linha2:#3A3B35;
  --tinta:#EDE9DF; --texto:#C9C4B8; --suave:#B5B0A4; --apagado:#9A968B;
  --ambar:#E3A23B; --verde:#7DB87A;
  --serif:'Spectral',Georgia,serif; --sans:'IBM Plex Sans',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
  --larg:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--tinta);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--ambar)}
a:hover{color:#F0BD66}
:focus-visible{outline:2px solid var(--ambar);outline-offset:3px;border-radius:4px}
.miolo{max-width:var(--larg);margin:0 auto;padding:0 32px}
section{padding:88px 0;border-top:1px solid var(--linha)}
h1,h2,h3{font-family:var(--serif);font-weight:600;color:var(--tinta);margin:0}
h1{font-size:clamp(40px,6vw,72px);line-height:1.02;letter-spacing:-.02em;font-variant-ligatures:no-common-ligatures}
h2{font-size:clamp(32px,4vw,48px);line-height:1.08;letter-spacing:-.01em;font-variant-ligatures:no-common-ligatures}
h3{font-size:24px;line-height:1.2}
p{margin:0}
.chamada{font-size:15px;color:var(--ambar);margin-bottom:14px}
.lead{font-size:20px;line-height:1.55;color:var(--texto);max-width:620px}
.corpo{color:var(--texto);max-width:680px}

/* topo */
.topo{position:sticky;top:0;z-index:10;background:rgba(18,19,17,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--linha)}
.topo .miolo{display:flex;align-items:center;justify-content:space-between;min-height:64px;gap:20px}
.marca{display:inline-flex;align-items:center;gap:10px;font-family:var(--serif);font-weight:600;font-size:20px;color:var(--tinta);text-decoration:none;white-space:nowrap}
.marca img{display:block}
.topo nav{display:flex;gap:26px;flex-wrap:wrap}
.topo nav a{color:var(--texto);text-decoration:none;font-size:15px;min-height:44px;display:inline-flex;align-items:center}
.topo nav a:hover{color:var(--tinta)}

/* botões */
.botoes{display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 26px;border-radius:999px;font-weight:600;font-size:16px;text-decoration:none;border:1px solid transparent;transition:background .2s,border-color .2s}
.btn-1{background:var(--ambar);color:#121311}
.btn-1:hover{background:#F0BD66;color:#121311}
.btn-2{border-color:var(--linha2);color:var(--tinta)}
.btn-2:hover{border-color:var(--ambar);color:var(--tinta)}

/* hero */
.hero{padding:72px 0 64px;border-top:0}
.hero .miolo{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px;align-items:center}
.hero-txt{display:flex;flex-direction:column;gap:26px}
.cena{position:fixed;inset:0;z-index:0;pointer-events:none}
.cena canvas{display:block;width:100%;height:100%;pointer-events:none}
/* quem escuta o mouse é a página; o cursor conta o que está acontecendo */
body.sobre-ponto{cursor:pointer}
body.arrastando{cursor:grabbing;user-select:none;-webkit-user-select:none}
.grade-fundo{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(58,59,53,.25) 1px,transparent 1px),linear-gradient(90deg,rgba(58,59,53,.25) 1px,transparent 1px);
  background-size:92px 92px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000 10%,transparent 75%);
  mask-image:radial-gradient(ellipse at 50% 30%,#000 10%,transparent 75%)}
.topo,main,.rodape,.hud,.ticker,.sala{position:relative;z-index:1}
.hero-lado{position:relative;min-height:540px;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end;gap:14px;pointer-events:none}
.hero-lado .terminal,.hero-lado .dica{pointer-events:auto}
@keyframes piscar{0%,100%{border-color:var(--linha)}30%,70%{border-color:var(--ambar)}}
.cartao.piscar{animation:piscar 1.8s ease-in-out 1}
.dica{display:block;margin-top:10px;padding-top:9px;border-top:1px solid var(--linha);font-size:12px;color:var(--apagado)}
.rotulo3d{position:fixed;z-index:2;pointer-events:none;padding:6px 11px;border-radius:8px;background:var(--painel);border:1px solid var(--linha2);font-size:14px;color:var(--tinta);white-space:nowrap;opacity:0;transform:translate(-50%,-140%);transition:opacity .15s}
.rotulo3d small{display:block;font-size:12px;color:var(--apagado)}
.hero .miolo.faixa-fatos{display:block}
.fatos{display:flex;flex-wrap:wrap;gap:12px 36px;margin-top:56px;padding-top:24px;border-top:1px solid var(--linha)}
.fato{display:flex;align-items:baseline;gap:10px;color:var(--texto);font-size:15px}
.fato b{font-family:var(--mono);font-weight:500;font-size:26px;color:var(--tinta)}

/* casos em destaque */
.casos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:40px}
.caso{display:flex;flex-direction:column;gap:14px;padding:30px;border:1px solid var(--linha);border-radius:18px;background:var(--painel);text-decoration:none;color:inherit;transition:border-color .2s}
.caso:hover{border-color:var(--ambar);color:inherit}
.caso .tipo{font-size:14px;color:var(--apagado)}
.caso p{color:var(--suave);font-size:16px}
.caso .num{font-family:var(--mono);font-size:30px;color:var(--tinta);margin-top:auto;padding-top:18px}
.caso .num span{display:block;font-family:var(--sans);font-size:14px;color:var(--apagado)}
.caso .ir{color:var(--ambar);font-weight:600;font-size:15px}

/* grades de sistemas */
.bloco{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin:44px 0 18px;padding-bottom:12px;border-bottom:1px solid var(--linha)}
.bloco h3{font-family:var(--sans);font-size:20px}
.bloco span{font-size:14px;color:var(--apagado)}
.grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.cartao{background:var(--painel);border:1px solid var(--linha);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:10px}
.cartao.com-img{padding:14px 14px 20px}
.cartao.com-img .txt{padding:0 10px;display:flex;flex-direction:column;gap:10px}
.cartao .mini{display:block;border-radius:10px;overflow:hidden;border:1px solid var(--linha)}
.cartao .mini img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;transition:transform .35s}
.cartao .mini:hover img{transform:scale(1.03)}
.cartao .tipo{font-size:14px;color:var(--apagado)}
.cartao h4{font-family:var(--serif);font-size:24px;font-weight:600;margin:0;color:var(--tinta)}
.cartao p{font-size:15.5px;color:var(--suave)}
.links{display:flex;flex-wrap:wrap;gap:0 18px}
.links a{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:15px;text-decoration:none}

/* listas */
.lista{border-top:1px solid var(--linha)}
.lista div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:24px;padding:16px 0;border-bottom:1px solid var(--linha)}
.lista b{font-weight:600;color:var(--tinta)}
.lista span{color:var(--suave)}
.duas{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:56px;align-items:start}
.principios{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:40px}
.principios h3{font-family:var(--sans);font-size:20px;margin-bottom:10px}
.principios p{color:var(--suave);font-size:16px}
.stack{margin-top:48px;color:var(--apagado);font-size:15px;line-height:2}
.stack b{color:var(--texto);font-weight:500}

/* contato */
.contato h2{font-size:clamp(36px,5vw,60px);max-width:900px}
.contato .lead{margin:20px 0 30px}
.rodape{padding:28px 0 60px;color:var(--apagado);font-size:14px}

/* painel ao vivo */
.painel-topo{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.painel-hora{font-family:var(--mono);font-size:14px;color:var(--apagado)}
.vivo{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--verde);margin-right:6px;vertical-align:middle;animation:bater 2.2s ease-out infinite}
@keyframes bater{0%{box-shadow:0 0 0 0 rgba(125,184,122,.6)}70%{box-shadow:0 0 0 10px rgba(125,184,122,0)}100%{box-shadow:0 0 0 0 rgba(125,184,122,0)}}
.leituras{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-top:40px}
.leituras div{background:var(--painel);border:1px solid var(--linha);border-radius:14px;padding:20px 22px}
.leituras b{display:block;font-family:var(--mono);font-weight:500;font-size:38px;line-height:1.1;color:var(--tinta)}
.leituras > div > span{display:block;margin-top:6px;font-size:14.5px;color:var(--apagado);line-height:1.4}
.leituras span span{display:inline}
.registro{margin-top:40px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:32px;align-items:start}
.registro h3{font-family:var(--sans);font-size:19px}
.registro ul{list-style:none;margin:0;padding:0;font-family:var(--mono);font-size:15px}
.registro li{display:flex;gap:18px;padding:10px 0;border-bottom:1px solid var(--linha);color:var(--texto)}
.registro time{color:var(--ambar)}
.registro .obs{grid-column:1/-1;font-size:13.5px;color:var(--apagado);margin-top:4px}
@media (max-width:900px){.registro{grid-template-columns:1fr;gap:16px}}

/* páginas de caso */
.caso-topo{padding:80px 0 56px;border-top:0}
.caso-topo .voltar{display:inline-flex;align-items:center;min-height:44px;font-size:15px;text-decoration:none;margin-bottom:24px}
.caso-topo h1{font-size:clamp(44px,7vw,84px)}
.caso-topo .lead{margin-top:22px;max-width:760px}
.numeros{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.numeros div{border-top:2px solid var(--ambar);padding-top:18px}
.numeros b{display:block;font-family:var(--mono);font-weight:500;font-size:44px;line-height:1.1;color:var(--tinta)}
.numeros span{color:var(--suave);font-size:15.5px}
.modulos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px;margin-top:36px}
.modulos div{padding:22px 0;border-top:1px solid var(--linha)}
.modulos h3{font-family:var(--sans);font-size:19px;margin-bottom:8px}
.modulos p{color:var(--suave);font-size:16px}
.licao{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:40px;padding:28px 0;border-top:1px solid var(--linha)}
.licao h3{font-size:26px}
.licao p{color:var(--texto)}
.estado{display:inline-flex;align-items:center;gap:8px;font-size:14px}
.estado i{width:9px;height:9px;border-radius:50%;display:inline-block}
.ok i{background:var(--verde)} .ok{color:var(--verde)}
.obra i{border:1.5px solid var(--ambar)} .obra{color:var(--ambar)}
.proximo{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}

@media (max-width:900px){
  .miolo{padding:0 20px}
  section{padding:64px 0}
  .hero .miolo,.duas,.licao{grid-template-columns:1fr}
  .cena{height:380px}
  .casos,.grade,.principios,.numeros,.modulos{grid-template-columns:1fr}
  .lista div{grid-template-columns:1fr;gap:4px}
  .topo nav{gap:16px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}


/* ---------------------------------------------- barra viva (HUD) */
.hud{border-bottom:1px solid var(--linha);background:rgba(18,19,17,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.hud .miolo{display:flex;align-items:center;gap:22px;flex-wrap:wrap;min-height:40px;font-family:var(--mono);font-size:12.5px;color:var(--apagado)}
.hud-item b{color:var(--tinta);font-weight:500}
.hud-fim{margin-left:auto;display:flex;gap:10px}
.hud-btn{font-family:var(--mono);font-size:12.5px;color:var(--texto);background:transparent;border:1px solid var(--linha2);border-radius:999px;padding:6px 14px;min-height:34px;cursor:pointer;transition:border-color .2s,color .2s}
.hud-btn:hover{border-color:var(--ambar);color:var(--tinta)}
.hud-btn[aria-pressed="true"]{border-color:var(--verde);color:var(--verde)}
.topo{top:0}

/* ---------------------------------------------- terminal da abertura */
.terminal[hidden]{display:none}
.terminal{position:fixed;right:24px;bottom:56px;z-index:3;width:min(360px,calc(100vw - 48px));
  background:rgba(26,27,24,.9);border:1px solid var(--linha);border-radius:14px;padding:14px 16px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.terminal-topo{font-family:var(--mono);font-size:12px;color:var(--apagado);margin-bottom:10px}
.terminal ul{list-style:none;margin:0;padding:0;font-family:var(--mono);font-size:12.5px;line-height:1.75;color:var(--texto);min-height:96px}
.terminal li::before{content:"› ";color:var(--ambar)}

/* ---------------------------------------------- robôs */
.robos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:32px;margin-top:44px;align-items:start}
.robos h3{font-family:var(--sans);font-size:19px;margin-bottom:8px}
.lista-robos{list-style:none;margin:0;padding:0}
.lista-robos li{display:grid;grid-template-columns:minmax(0,1.4fr) auto auto;gap:14px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--linha);font-size:15px}
.lista-robos b{font-weight:500;color:var(--tinta)}
.lista-robos .r-ult{font-family:var(--mono);font-size:13px;color:var(--apagado)}
.lista-robos .r-prox{font-family:var(--mono);font-size:13px;color:var(--texto);text-align:right}
.lista-robos .r-prox.agora{color:var(--verde)}

/* ---------------------------------------------- ticker do rodapé */
.ticker[hidden]{display:none}
.ticker{position:fixed;left:0;right:0;bottom:0;z-index:5;border-top:1px solid var(--linha);background:rgba(18,19,17,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);overflow:hidden;height:34px;display:flex;align-items:center}
.ticker #ticker-linha{display:flex;white-space:nowrap;font-family:var(--mono);font-size:12.5px;color:var(--apagado);animation:correr 70s linear infinite}
.ticker span{padding-right:48px}
@keyframes correr{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.rodape{padding-bottom:80px}

/* ---------------------------------------------- sala de controle */
body.sem-rolar{overflow:hidden}
.sala[hidden]{display:none}
.sala{position:fixed;inset:0;z-index:20;background:rgba(10,11,9,.975);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;flex-direction:column;padding:24px 0 44px;overflow:auto}
.sala-topo{display:flex;justify-content:space-between;align-items:center;gap:16px;max-width:var(--larg);margin:0 auto;width:100%;padding:0 32px;font-family:var(--mono);font-size:13px;color:var(--apagado)}
.sala-corpo{max-width:var(--larg);margin:0 auto;width:100%;padding:28px 32px}
.sala-num{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.sala-num div{border:1px solid var(--linha);border-radius:12px;padding:16px 18px;background:rgba(26,27,24,.7)}
.sala-num b{display:block;font-family:var(--mono);font-weight:500;font-size:34px;color:var(--tinta)}
.sala-num > div > span{display:block;font-size:13.5px;color:var(--apagado)}
.sala-num span span{display:inline}
.sala-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px;margin-top:32px}
.sala-cols h3{font-family:var(--sans);font-size:18px;margin-bottom:10px}
.registro-ul{list-style:none;margin:0;padding:0;font-family:var(--mono);font-size:14px}
.registro-ul li{display:flex;gap:16px;padding:9px 0;border-bottom:1px solid var(--linha);color:var(--texto)}
.registro-ul time{color:var(--ambar)}
@media (max-width:760px){
  /* no celular o conteúdo manda: o terminal vive na seção "Ao vivo",
     a moldura encolhe para uma linha e a cena fica só de pano de fundo */
  .terminal{display:none}
  .hud .miolo{gap:14px;font-size:11.5px;min-height:36px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .hud .miolo::-webkit-scrollbar{display:none}
  .hud-item{white-space:nowrap}
  .hud-esconde{display:none}
  .hud-fim{margin-left:auto;width:auto}
  .hud-btn{padding:5px 11px;min-height:32px;font-size:11.5px;white-space:nowrap}
  /* topo: nome numa linha, menu em outra, rolável se não couber */
  .topo .miolo{flex-direction:column;align-items:stretch;gap:2px;padding-top:8px;padding-bottom:6px}
  .topo nav{gap:18px;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
  .topo nav::-webkit-scrollbar{display:none}
  .topo nav a{min-height:34px}
  /* números em duas colunas: a página inteira ficava com 12 mil pixels */
  .leituras{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .leituras div{padding:14px}
  .leituras b{font-size:27px}
  .leituras > div > span{font-size:13px;margin-top:4px}
  .sala-num{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero{padding:32px 0 44px}
  .hero-lado{display:none}
  /* véu: a galáxia gira atrás, mas o texto continua legível */
  .hero-txt{position:relative}
  .hero-txt::before{content:"";position:absolute;inset:-18px -16px;z-index:-1;border-radius:18px;
    background:radial-gradient(120% 90% at 30% 40%, rgba(18,19,17,.92) 55%, rgba(18,19,17,0) 100%)}
  .fatos{margin-top:34px}
  section{padding:52px 0}
}
@media (max-width:900px){
  .marca{font-size:18px}
  .topo .miolo{min-height:56px;gap:12px}
  .topo nav{gap:14px}
  .topo nav a{font-size:14px;min-height:38px}
  .hud .miolo{gap:12px;font-size:11.5px}
  .hud-fim{width:100%;margin-left:0}
  .terminal{max-width:none;margin-left:0}
  .hero-lado{min-height:300px}
  .robos,.sala-cols{grid-template-columns:1fr}
  .lista-robos li{grid-template-columns:1fr auto;row-gap:2px}
  .lista-robos b{grid-column:1/-1}
}

#contador-vistos{color:var(--ambar)}


/* ------------------------------------------- ficha do sistema (na página) */
.ficha-fundo[hidden],.ficha[hidden]{display:none}
.ficha-fundo{position:fixed;inset:0;z-index:14;background:rgba(10,11,9,.55);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.ficha{position:fixed;z-index:15;right:32px;top:50%;transform:translateY(-50%);width:min(380px,calc(100vw - 40px));
  background:var(--painel);border:1px solid var(--linha2);border-radius:18px;padding:18px;
  display:flex;flex-direction:column;gap:12px;box-shadow:0 24px 60px rgba(0,0,0,.55);animation:entra .22s ease-out}
@keyframes entra{from{opacity:0;transform:translateY(-50%) scale(.97)}to{opacity:1;transform:translateY(-50%) scale(1)}}
.ficha-topo{display:flex;justify-content:space-between;align-items:center;gap:12px}
.ficha-tipo{font-family:var(--mono);font-size:12px;color:var(--apagado)}
.ficha-x{background:transparent;border:0;color:var(--apagado);font-size:16px;line-height:1;cursor:pointer;min-width:44px;min-height:44px}
.ficha-x:hover{color:var(--tinta)}
.ficha img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:12px;border:1px solid var(--linha)}
.ficha h3{font-family:var(--serif);font-size:28px;margin:0}
.ficha-estado{font-family:var(--mono);font-size:13px;color:var(--verde)}
.ficha-estado.fora{color:#F85149}
.ficha-desc{font-size:15.5px;line-height:1.55;color:var(--suave)}
.ficha-acoes{display:flex;gap:10px;flex-wrap:wrap;margin-top:2px}
.ficha-acoes .btn{min-height:44px;font-size:15px;padding:0 18px}
@media (max-width:900px){.ficha{right:12px;left:12px;top:auto;bottom:46px;transform:none;animation:none}
  .terminal{right:10px;left:10px;bottom:44px;width:auto}}


/* ------------------------------------------------------------ abertura */
.abertura[hidden]{display:none}
.abertura{position:fixed;inset:0;z-index:40;background:var(--bg);display:flex;align-items:center;justify-content:center;
  transition:opacity .5s ease,visibility .5s}
.abertura.saindo{opacity:0;visibility:hidden}
.abertura-meio{text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;padding:0 24px}
.abertura-marca img{opacity:0;animation:surge .7s ease-out .1s forwards}
@keyframes surge{from{opacity:0;transform:scale(.8) rotate(-12deg)}to{opacity:1;transform:none}}
.abertura-nome{font-family:var(--mono);font-size:clamp(20px,5vw,34px);letter-spacing:.42em;color:var(--tinta);
  opacity:0;animation:surge .7s ease-out .35s forwards;padding-left:.42em}
.abertura-sub{font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--ambar);
  opacity:0;animation:surge .7s ease-out .55s forwards}
.abertura-barra{width:min(280px,70vw);height:2px;background:var(--linha);overflow:hidden;margin-top:6px}
.abertura-barra i{display:block;height:100%;width:0;background:var(--ambar);animation:enche 1.9s ease-out forwards}
@keyframes enche{to{width:100%}}
.abertura-log{font-family:var(--mono);font-size:12px;color:var(--apagado);min-height:18px}
.abertura-pular{position:absolute;right:20px;bottom:20px;background:transparent;border:1px solid var(--linha2);
  color:var(--texto);font-family:var(--mono);font-size:12px;border-radius:999px;padding:8px 16px;min-height:40px;cursor:pointer}
.abertura-pular:hover{border-color:var(--ambar)}
@media (prefers-reduced-motion:reduce){.abertura{display:none!important}}