/* rafamelo/hub: ferramentas para filmmakers. Visual dos apps (Descarrega, Controle de Câmeras):
   quase preto, Chivo Mono nos rótulos, cantos curtos, bordas finas, um acento por produto. */
body.hub {
  --fundo: #0c0c0b; --painel: #141413; --painel-2: #191917; --borda: #262623; --borda-forte: #34342f;
  --txt: #ededeb; --txt-2: #a9a9a2; --txt-3: #6f6f69; --acento: #ff8236; --rec: #ff3b30;
  --w: 1180px;
  background: var(--fundo); color: var(--txt); font: 400 15px/1.65 var(--sans); overflow-x: hidden;
}
.hub ::selection { background: var(--acento); color: #111; }
.hub .grao { opacity: .03; }
html { scroll-behavior: smooth; }
.w { max-width: var(--w); margin: 0 auto; padding: 0 clamp(18px, 4vw, 32px); }
.mono { font-family: var(--mono); }
.rot { font: 500 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--txt-3); }

/* ——— Topo ——— */
.h-topo { position: sticky; top: 0; z-index: 30; background: rgba(12,12,11,.8); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); border-bottom: 1px solid var(--borda); }
.h-topo .w { display: flex; align-items: center; gap: 28px; height: 58px; }
.h-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 500 14px/1 var(--mono); letter-spacing: -.01em; }
.h-logo svg { width: 26px; height: 26px; }
.h-logo b { font-weight: 500; color: var(--acento); }
.h-topo nav { display: flex; gap: 4px; }
.h-topo nav a { font: 500 12px/1 var(--mono); text-decoration: none; color: var(--txt-2); padding: 8px 10px; border-radius: 5px; transition: color .2s, background .2s; }
.h-topo nav a:hover { color: var(--txt); background: var(--painel-2); }
.h-topo nav a small { font-size: 9px; color: var(--txt-3); margin-left: 4px; letter-spacing: .1em; text-transform: uppercase; }
.h-filmes { margin-left: auto; font: 500 11px/1 var(--mono); text-decoration: none; color: var(--txt-3); transition: color .2s; }
.h-filmes:hover { color: var(--txt); }

/* ——— Abertura ——— */
.h-abertura { padding: clamp(80px, 11vw, 140px) 0 clamp(60px, 8vw, 90px); position: relative; }
.h-abertura::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--borda) 1px, transparent 1px), linear-gradient(90deg, var(--borda) 1px, transparent 1px);
  background-size: 48px 48px; opacity: .45; -webkit-mask: radial-gradient(ellipse 70% 80% at 30% 0%, #000, transparent 70%); mask: radial-gradient(ellipse 70% 80% at 30% 0%, #000, transparent 70%); }
.h-chip { display: inline-flex; align-items: center; gap: 9px; padding: 6px 11px 6px 9px; border: 1px solid var(--borda); border-radius: 999px; background: var(--painel); font: 500 11px/1 var(--mono); color: var(--txt-2); }
.h-chip i { width: 6px; height: 6px; border-radius: 50%; background: #3ddc6e; box-shadow: 0 0 0 3px rgba(61,220,110,.15); }
.h-abertura h1 { margin: 26px 0 22px; font: 500 clamp(34px, 4.6vw, 58px)/1.06 var(--sans); letter-spacing: -.035em; max-width: 780px; }
.h-abertura h1 span { color: var(--txt-3); }
.h-abertura p { margin: 0; max-width: 600px; font-size: 17px; line-height: 1.6; color: var(--txt-2); }
.h-abertura p b { color: var(--txt); font-weight: 500; }
.h-terminal { margin-top: 44px; display: inline-flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--borda); border-radius: 6px; background: var(--painel); font: 400 12.5px/1 var(--mono); color: var(--txt-2); }
.h-terminal .p { color: var(--acento); }
.h-terminal .cur { display: inline-block; width: 7px; height: 14px; background: var(--txt); vertical-align: -2px; animation: pisca 1s steps(1) infinite; }
@keyframes pisca { 50% { opacity: 0; } }

/* ——— Lista de ferramentas ——— */
.h-secao { padding: 30px 0 90px; }
.h-cabeca { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding-bottom: 16px; margin-bottom: 22px; border-bottom: 1px solid var(--borda); }
.h-cabeca h2 { margin: 0; font: 500 13px/1 var(--mono); letter-spacing: .02em; }
.h-cabeca h2 span { color: var(--txt-3); }
.produto { display: grid; grid-template-columns: 1fr 1.05fr; gap: 0; background: var(--painel); border: 1px solid var(--borda); border-radius: 10px; overflow: hidden; margin-bottom: 16px; transition: border-color .3s; }
.produto:hover { border-color: var(--borda-forte); }
.produto-info { padding: clamp(24px, 3.4vw, 40px); display: flex; flex-direction: column; }
.produto-id { display: flex; align-items: center; gap: 14px; }
.icone { width: 52px; height: 52px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--painel-2); border: 1px solid var(--borda-forte); box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 8px 24px rgba(0,0,0,.35); }
.icone svg { width: 30px; height: 30px; }
.produto-id h3 { margin: 0; font: 500 22px/1.1 var(--sans); letter-spacing: -.02em; }
.etiquetas { display: flex; gap: 6px; margin-top: 7px; flex-wrap: wrap; }
.et { font: 500 9.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 4px 6px; border-radius: 4px; border: 1px solid var(--borda-forte); color: var(--txt-2); }
.et.status { border-color: color-mix(in srgb, var(--cor) 45%, transparent); color: var(--cor); background: color-mix(in srgb, var(--cor) 8%, transparent); }
.plataforma { margin: 22px 0 10px; font: 400 11.5px/1.4 var(--mono); color: var(--txt-3); }
.produto-info > p { margin: 0; color: var(--txt-2); font-size: 15px; }
.produto-info > p b { color: var(--txt); font-weight: 500; }
.produto ul { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 8px; }
.produto li { display: flex; gap: 10px; font-size: 13.5px; color: var(--txt-2); }
.produto li::before { content: ''; flex: none; width: 5px; height: 5px; margin-top: 8px; border-radius: 1px; background: var(--cor); }
.ver { margin-top: auto; padding-top: 28px; }
.ver a { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; padding: 11px 15px; border-radius: 6px; border: 1px solid var(--borda-forte); background: linear-gradient(#1d1d1b, #171715); font: 500 12px/1 var(--mono); transition: border-color .2s, background .2s; }
.ver a:hover { border-color: var(--cor); }
.ver a i { font-style: normal; color: var(--cor); transition: transform .3s var(--suave); }
.ver a:hover i { transform: translateX(3px); }
.produto-demo { position: relative; border-left: 1px solid var(--borda); background: radial-gradient(ellipse 80% 70% at 50% 100%, color-mix(in srgb, var(--cor) 10%, transparent), transparent 70%), #0f0f0e; display: grid; place-items: center; min-height: 360px; overflow: hidden; padding: 30px; }
.produto-demo::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(var(--borda) 1px, transparent 1px); background-size: 18px 18px; opacity: .6; }
.janela { position: relative; width: 100%; max-width: 440px; background: #121211; border: 1px solid var(--borda-forte); border-radius: 8px; box-shadow: 0 30px 60px rgba(0,0,0,.5); overflow: hidden; }
.janela-barra { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-bottom: 1px solid var(--borda); background: #171716; }
.janela-barra i { width: 9px; height: 9px; border-radius: 50%; background: #2e2e2b; }
.janela-barra span { margin-left: 8px; font: 500 10px/1 var(--mono); color: var(--txt-3); letter-spacing: .06em; }
.janela-corpo { padding: 18px; }

/* demo Descarrega */
.d-fluxo { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; }
.d-sd { width: 50px; height: 64px; background: linear-gradient(#ff9550, #e86c22); clip-path: polygon(0 0, 70% 0, 100% 20%, 100% 100%, 0 100%); border-radius: 3px; position: relative; }
.d-sd::before { content: ''; position: absolute; left: 7px; top: 6px; width: 26px; height: 9px; background: repeating-linear-gradient(90deg, #f3d38a 0 3px, transparent 3px 5px); }
.d-sd::after { content: '↓'; position: absolute; inset: 20px 0 0; display: grid; place-items: center; font: 700 18px/1 var(--mono); color: #fff; }
.d-fios { display: grid; gap: 22px; }
.d-fio { height: 2px; background: #262624; position: relative; overflow: hidden; border-radius: 2px; }
.d-fio::after { content: ''; position: absolute; top: 0; left: -35%; width: 35%; height: 100%; background: var(--cor); animation: fluxo 1.3s linear infinite; }
.d-fio:nth-child(2)::after { animation-delay: .4s; }
@keyframes fluxo { to { left: 100%; } }
.d-hds { display: grid; gap: 10px; }
.d-hd { width: 112px; padding: 9px 10px; border: 1px solid var(--borda-forte); border-radius: 5px; background: linear-gradient(#1f1f1d, #181816); font: 500 9px/1 var(--mono); color: var(--txt-2); letter-spacing: .08em; position: relative; }
.d-hd::after { content: ''; position: absolute; right: 9px; top: 10px; width: 5px; height: 5px; border-radius: 50%; background: #3ddc6e; animation: led .45s steps(2) infinite; }
.d-hd:nth-child(2)::after { animation-delay: .2s; }
.d-hd small { display: block; margin-top: 6px; font-size: 8.5px; color: var(--txt-3); }
@keyframes led { 50% { opacity: .25; } }
.d-progresso { margin-top: 18px; display: flex; align-items: center; gap: 10px; font: 500 10px/1 var(--mono); color: var(--txt-2); }
.d-progresso b { flex: 1; height: 4px; border-radius: 3px; background: #242422; overflow: hidden; position: relative; }
.d-progresso b::after { content: ''; position: absolute; inset: 0; background: var(--cor); transform-origin: left; animation: enche 6s var(--suave) infinite; }
@keyframes enche { 0% { transform: scaleX(.05); } 85%, 100% { transform: scaleX(1); } }
.d-ok { margin-top: 12px; font: 500 10px/1.5 var(--mono); color: #3ddc6e; }

/* demo Câmeras (preto e branco, REC vermelho) */
.c-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.c-cam { position: relative; aspect-ratio: 16 / 10; border-radius: 4px; overflow: hidden; background: #000 center / cover; filter: grayscale(1) contrast(1.05); }
.c-cam span { position: absolute; left: 6px; top: 6px; font: 600 8.5px/1 var(--mono); letter-spacing: .08em; color: #fff; padding: 3px 4px; background: rgba(0,0,0,.6); border-radius: 2px; }
.c-cam.rec { outline: 1.5px solid var(--rec); outline-offset: -1.5px; filter: grayscale(1) contrast(1.05); }
.c-cam.rec span::before { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--rec); margin-right: 4px; vertical-align: 0; animation: pisca 1s steps(1) infinite; }
.c-cam em { position: absolute; right: 6px; bottom: 6px; font: 500 8px/1 var(--mono); color: #ddd; font-style: normal; }
.c-barra { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font: 500 9.5px/1 var(--mono); color: var(--txt-2); }
.c-rec { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 4px; background: var(--rec); color: #fff; font-weight: 600; letter-spacing: .1em; }
.c-rec::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #fff; }

/* demo Memora */
.m-player { position: relative; aspect-ratio: 16 / 9; border-radius: 5px; overflow: hidden; background: #000 center / cover; }
.m-player::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.75)); }
.m-player b { position: absolute; left: 14px; bottom: 30px; font: italic 300 20px/1 var(--serifa); color: #fff; }
.m-player small { position: absolute; left: 14px; bottom: 14px; font: 400 8.5px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.m-play { position: absolute; left: 50%; top: 42%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(255,255,255,.9); }
.m-play::after { content: ''; position: absolute; left: 18px; top: 14px; border-left: 14px solid #111; border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.m-link { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 9px 11px; border: 1px solid var(--borda-forte); border-radius: 5px; font: 500 10px/1 var(--mono); color: var(--txt-2); }
.m-link b { margin-left: auto; color: var(--cor); font-weight: 500; }

/* demo Maestro */
.ma-trilha { display: grid; grid-template-columns: 74px 1fr; align-items: center; gap: 10px; margin-bottom: 10px; font: 500 9.5px/1.3 var(--mono); color: var(--txt-2); }
.ma-trilha small { display: block; color: var(--txt-3); font-size: 8.5px; }
.onda { height: 40px; display: flex; align-items: center; gap: 2px; padding: 0 6px; border-radius: 4px; background: #181816; }
.onda i { flex: 1; height: calc(var(--h) * 1%); border-radius: 1px; background: var(--cor); opacity: .9; animation: onda 1.1s ease-in-out infinite alternate; animation-delay: calc(var(--d) * -.07s); }
.onda.b i { background: #d9d9d4; opacity: .55; }
@keyframes onda { to { transform: scaleY(.5); } }
.ma-pe { display: flex; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--borda); font: 500 10px/1 var(--mono); color: var(--txt-2); }
.ma-pe b { color: var(--cor); font-weight: 500; }

/* demo decupa */
.dc-takes { display: flex; gap: 3px; height: 46px; }
.dc-takes i { flex: var(--f); border-radius: 3px; background: #252523; position: relative; animation: nota 5s ease-in-out infinite; animation-delay: calc(var(--d) * .2s); }
.dc-takes i.bom { --c: var(--cor); }
.dc-takes i.medio { --c: #6d6890; }
@keyframes nota { 0%, 25% { background: #252523; } 40%, 92% { background: var(--c, #2e2e2b); } 100% { background: #252523; } }
.dc-regua { height: 16px; margin-top: 8px; background: repeating-linear-gradient(90deg, #333 0 1px, transparent 1px 20px); position: relative; }
.dc-regua::after { content: ''; position: absolute; top: -62px; width: 1.5px; height: 78px; background: #fff; animation: varre 5s linear infinite; }
@keyframes varre { from { left: 0; } to { left: 100%; } }
.dc-pe { display: flex; justify-content: space-between; margin-top: 12px; font: 500 10px/1 var(--mono); color: var(--txt-2); }
.dc-pe b { color: var(--cor); font-weight: 500; }

/* ——— Laboratório ——— */
.lab { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.lab-item { padding: 22px; background: var(--painel); border: 1px solid var(--borda); border-radius: 10px; }
.lab-item .icone { width: 42px; height: 42px; border-radius: 10px; }
.lab-item .icone svg { width: 24px; height: 24px; }
.lab-item h3 { margin: 16px 0 4px; font: 500 16px/1.2 var(--sans); letter-spacing: -.01em; }
.lab-item p { margin: 8px 0 0; font-size: 13.5px; color: var(--txt-2); }
.mais { display: flex; align-items: center; gap: 18px; padding: 22px 24px; border: 1px dashed var(--borda-forte); border-radius: 10px; margin-top: 12px; color: var(--txt-2); font-size: 14px; }
.mais b { font: 400 22px/1 var(--mono); color: var(--txt-3); }

/* ——— Lista de espera ——— */
.espera { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(28px, 5vw, 70px); padding: clamp(28px, 4.5vw, 52px); background: var(--painel); border: 1px solid var(--borda); border-radius: 12px; }
.espera h2 { margin: 14px 0 14px; font: 500 clamp(26px, 3vw, 36px)/1.1 var(--sans); letter-spacing: -.03em; }
.espera p { margin: 0; color: var(--txt-2); }
.espera form { display: grid; gap: 14px; }
.campo label { display: block; font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--txt-3); margin-bottom: 7px; }
.campo input, .campo select { width: 100%; padding: 12px 13px; background: #0f0f0e; border: 1px solid var(--borda-forte); border-radius: 6px; color: var(--txt); font: 400 14px var(--sans); outline: none; color-scheme: dark; transition: border-color .2s; }
.campo input:focus, .campo select:focus { border-color: var(--acento); }
.marcas { display: flex; flex-wrap: wrap; gap: 6px; }
.marcas label { display: inline-flex; align-items: center; gap: 8px; padding: 9px 11px; border: 1px solid var(--borda-forte); border-radius: 6px; font: 500 11.5px/1 var(--mono); cursor: pointer; text-transform: none; letter-spacing: 0; color: var(--txt-2); margin: 0; transition: border-color .2s, color .2s, background .2s; }
.marcas input { accent-color: var(--acento); margin: 0; }
.marcas label:has(input:checked) { border-color: var(--acento); color: var(--txt); background: rgba(255,130,54,.07); }
.lgpd { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: var(--txt-3); }
.lgpd input { accent-color: var(--acento); margin-top: 3px; }
.enviar { justify-self: start; display: inline-flex; gap: 10px; align-items: center; padding: 12px 18px; border: 0; border-radius: 6px; background: linear-gradient(#ff9550, #f2752b); color: #1d0f04; font: 600 12px/1 var(--mono); cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.enviar[disabled] { opacity: .5; cursor: wait; }
.aviso { font: 500 12px/1.5 var(--mono); color: var(--txt-3); min-height: 1.5em; margin: 0; }
.aviso.ok { color: #3ddc6e; } .aviso.erro { color: #ff6b5b; }

.h-rodape { border-top: 1px solid var(--borda); padding: 28px 0 36px; }
.h-rodape .w { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; font: 400 12px/1.6 var(--mono); color: var(--txt-3); }
.h-rodape a { color: var(--txt-2); text-decoration: none; }
.h-rodape a:hover { color: var(--txt); }

.surge { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--suave), transform .9s var(--suave); }
.surge.visivel { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .produto { grid-template-columns: 1fr; }
  .produto-demo { border-left: 0; border-top: 1px solid var(--borda); min-height: 0; padding: 26px 18px; }
  .lab, .espera { grid-template-columns: 1fr; }
  .h-topo nav { display: none; }
}