/* Direcao "Oficina", versao organizada.
   Regras do sistema (manter ao mexer):
   - espacamento em multiplos de 8; secoes com o mesmo respiro
   - cabecalho de secao SEMPRE centralizado, maximo 720px
   - raio externo = raio interno + padding (camadas aninhadas)
   - laranja so para acao e destaque; fonte mono so para codigo/endereco */
:root {
  --bg: #0E0F11;
  --sup-1: #141518;
  --sup-2: #1A1B1F;
  --sup-3: #24252B;
  --linha: rgba(255, 255, 255, .07);
  --linha-2: rgba(255, 255, 255, .12);
  --txt: #EDEDEF;
  --txt-2: #A1A1AA;
  --txt-3: #71717A;
  --acento: #FF6A1A;
  --acento-2: #FF8540;
  --acento-tinta: #1F0C00;
  --acento-fundo: rgba(255, 106, 26, .10);
  --verde: #34D399;
  --f-titulo: 'Space Grotesk', system-ui, sans-serif;
  --f-texto: 'Manrope', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;
  --largura: 1120px;
  --r-1: 10px;   /* controles */
  --r-2: 16px;   /* cartoes */
  --r-3: 24px;   /* blocos grandes */
  --sombra: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 24px 48px -24px rgba(0, 0, 0, .7);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { margin: 0; background: var(--bg); color: var(--txt); font: 400 16px/1.65 var(--f-texto); overflow-x: clip; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--f-titulo); font-weight: 600; margin: 0; letter-spacing: -0.025em; text-wrap: balance; }
p, ul, ol { margin: 0; }
p, li { text-wrap: pretty; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.wrap { width: min(var(--largura), 100% - 48px); margin-inline: auto; }
@media (max-width: 560px) { .wrap { width: calc(100% - 32px); } }

.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--acento); }
.ponto-vivo { display: inline-block; flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 3px rgba(52, 211, 153, .18); }

/* ---- botoes ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 22px; border-radius: var(--r-1);
  border: 1px solid var(--linha-2); background: var(--sup-2);
  font-weight: 700; font-size: 15px; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition-property: background-color, border-color, transform; transition-duration: .15s; transition-timing-function: ease-out;
}
.btn:hover { background: var(--sup-3); border-color: rgba(255, 255, 255, .2); }
.btn:active { transform: scale(.97); }
.btn-p { background: var(--acento); border-color: var(--acento); color: var(--acento-tinta); }
.btn-p:hover { background: var(--acento-2); border-color: var(--acento-2); }
.btn-sm { height: 40px; padding: 0 16px; font-size: 14px; }
.btn-lg { height: 56px; padding: 0 28px; font-size: 16px; }
.link { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; color: var(--txt); font-weight: 700; font-size: 14.5px; text-decoration: none; }
.link::after { content: '→'; color: var(--acento); transition: transform .15s ease-out; }
.link:hover::after { transform: translateX(3px); }

/* ---- barra ---- */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(14, 15, 17, .82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--linha); }
.nav-in { width: min(var(--largura), 100% - 48px); margin-inline: auto; height: 68px; display: flex; align-items: center; gap: 32px; }
.marca { display: flex; align-items: center; gap: 10px; margin-right: auto; font: 700 16px var(--f-titulo); letter-spacing: -0.01em; text-decoration: none; }
.marca-sinal { font: 600 12px var(--f-mono); color: var(--acento); background: var(--acento-fundo); border: 1px solid rgba(255, 106, 26, .25); border-radius: 7px; padding: 4px 6px; }
.nav-links { display: flex; gap: 28px; }
.nav-links a { color: var(--txt-2); font-size: 14.5px; font-weight: 600; text-decoration: none; transition: color .15s ease-out; }
.nav-links a:hover { color: var(--txt); }
.idiomas { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--linha-2); border-radius: var(--r-1); }
.idiomas button { min-width: 34px; height: 30px; background: none; border: 0; border-radius: 7px; cursor: pointer; font-size: 12px; font-weight: 700; color: var(--txt-3); transition: background-color .15s, color .15s; }
.idiomas button[aria-pressed="true"] { background: var(--sup-3); color: var(--txt); }
@media (max-width: 920px) { .nav-links { display: none; } .nav-in { gap: 12px; } }
@media (max-width: 480px) { .nav-cta { display: none; } }

/* ---- topo ---- */
.hero { padding: clamp(64px, 9vw, 120px) 0 clamp(72px, 9vw, 120px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 56px; align-items: center; }
@media (max-width: 1000px) { .hero-grid { grid-template-columns: 1fr; gap: 48px; } }
.hero h1 { font-size: clamp(36px, 4.1vw, 52px); line-height: 1.07; letter-spacing: -0.035em; margin-top: 28px; }
.hero-sub { color: var(--txt-2); font-size: clamp(16.5px, 1.5vw, 18px); line-height: 1.6; margin-top: 24px; max-width: 52ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.provas { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 32px; }
.provas li { display: flex; align-items: center; gap: 8px; color: var(--txt-2); font-size: 14px; }
.provas li::before, .palco-pontos li::before {
  content: ''; flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%;
  background: var(--acento-fundo) no-repeat center / 10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5l2.5 2.5L10 3.5' fill='none' stroke='%23FF6A1A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* cartao do produto: uma peca so, em grade (raio 18 = 12 interno + 6 de padding) */
.produto { background: var(--sup-1); border: 1px solid var(--linha-2); border-radius: 18px; box-shadow: var(--sombra); overflow: hidden; }
.produto-barra { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 16px; border-bottom: 1px solid var(--linha); background: var(--sup-2); }
.produto-nome { font: 500 12px var(--f-mono); color: var(--txt-3); }
.produto-corpo { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 6px; padding: 6px; }

.mock-kpis { display: grid; grid-template-rows: auto auto auto 1fr; gap: 6px; }
.kpi { padding: 12px; border-radius: 12px; background: var(--sup-2); border: 1px solid var(--linha); }
.kpi b { display: block; font: 600 24px/1.1 var(--f-titulo); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kpi-destaque b { color: var(--acento); }
.kpi span { display: block; margin-top: 4px; font-size: 11.5px; line-height: 1.35; color: var(--txt-2); }
.mini-barras { display: flex; align-items: flex-end; gap: 5px; min-height: 48px; padding: 10px 12px; border-radius: 12px; background: var(--sup-2); border: 1px solid var(--linha); }
.mini-barras i { flex: 1; height: var(--h); border-radius: 3px 3px 1px 1px; background: linear-gradient(var(--acento), rgba(255, 106, 26, .3)); }

/* ---- secoes ---- */
.secao { padding: clamp(80px, 10vw, 128px) 0; border-top: 1px solid var(--linha); }
.secao-cab { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.secao h2 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.1; letter-spacing: -0.03em; margin-top: 16px; }
.secao-sub { color: var(--txt-2); font-size: 17.5px; margin: 16px auto 0; max-width: 58ch; }
.tags { font: 500 12px/1.7 var(--f-mono); color: var(--txt-3); }

/* ---- solucoes: curtas, o detalhe esta nos projetos ---- */
.secao-solucoes { padding-top: clamp(56px, 7vw, 88px); }
.secao-solucoes .secao-cab { margin-bottom: 36px; }
.solucoes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1000px) { .solucoes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .solucoes { grid-template-columns: 1fr; } }
.sol {
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: 24px 22px 22px;
  background: var(--sup-1); border: 1px solid var(--linha); border-radius: var(--r-2); text-decoration: none; overflow: hidden;
  transition-property: border-color, transform, background-color; transition-duration: .25s; transition-timing-function: cubic-bezier(.2, .7, .2, 1);
}
.sol::before { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 80% at 0% 0%, rgba(255, 106, 26, .16), transparent 60%); opacity: 0; transition: opacity .3s; pointer-events: none; }
.sol:hover { border-color: rgba(255, 106, 26, .45); transform: translateY(-4px); }
.sol:hover::before { opacity: 1; }
.sol-ico { position: relative; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--acento-fundo); border: 1px solid rgba(255, 106, 26, .22); transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.sol:hover .sol-ico { transform: rotate(-6deg) scale(1.06); }
.sol-ico svg { width: 22px; height: 22px; fill: none; stroke: var(--acento); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sol b { position: relative; font: 600 18px/1.25 var(--f-titulo); letter-spacing: -0.01em; margin-top: 6px; }
.sol > span:not(.sol-ico):not(.sol-mais) { position: relative; color: var(--txt-2); font-size: 14.5px; line-height: 1.55; }
.sol-mais { position: relative; margin-top: auto; padding-top: 8px; font-weight: 700; font-size: 14px; color: var(--txt); }
.sol-mais::after { content: ' \2192'; color: var(--acento); display: inline-block; transition: transform .2s; }
.sol:hover .sol-mais::after { transform: translateX(4px); }

.janela-navegador { border: 1px solid var(--linha-2); border-radius: var(--r-2); overflow: hidden; background: var(--sup-1); box-shadow: var(--sombra); }
.jn-barra { display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 16px; border-bottom: 1px solid var(--linha); background: var(--sup-2); }
.jn-pontos { display: flex; gap: 6px; flex-shrink: 0; }
.jn-pontos i { width: 10px; height: 10px; border-radius: 50%; background: var(--sup-3); border: 1px solid var(--linha-2); }
.jn-url { flex: 1; min-width: 0; text-align: center; font: 500 12px var(--f-mono); color: var(--txt-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jn-selo { flex-shrink: 0; font-size: 11px; font-weight: 700; color: var(--acento); background: var(--acento-fundo); padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.jn-tela { position: relative; flex: 1; min-height: 0; background: #fff; }
.jn-tela iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.jn-carregando { position: absolute; inset: 0; display: grid; place-items: center; background: var(--sup-1); color: var(--txt-3); font-size: 14px; }
.jn-imagem { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 12%; background: #120F1B; text-decoration: none; }
.jn-imagem img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.jn-imagem .btn { position: relative; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
@media (max-width: 560px) { .jn-tela { height: 76vh; } .jn-selo { display: none; } }

/* ---- 3D ---- */
.config { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 8px; padding: 8px; background: var(--sup-1); border: 1px solid var(--linha); border-radius: var(--r-3); }
@media (max-width: 860px) { .config { grid-template-columns: 1fr; } }
.config-palco { position: relative; min-height: 400px; border-radius: var(--r-2); overflow: hidden; background: radial-gradient(circle at 50% 42%, #25262C 0%, #121316 75%); touch-action: pan-y; }
#pet-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
#pet-canvas:active { cursor: grabbing; }
.config-dica { position: absolute; left: 16px; bottom: 14px; font-size: 12px; color: var(--txt-3); pointer-events: none; }
.config-form { display: flex; flex-direction: column; gap: 8px; padding: 24px; }
.config-form label:not(.cor), .cores legend { font-size: 13px; font-weight: 700; color: var(--txt-2); }
.config-form label:not(.cor) { margin-top: 4px; }
.config-form input:not([type="radio"]) { height: 48px; padding: 0 14px; border-radius: var(--r-1); border: 1px solid var(--linha-2); background: var(--bg); font-size: 16px; font-weight: 600; transition: border-color .15s, box-shadow .15s; }
.config-form input:not([type="radio"]):focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-fundo); }
.config-aviso { min-height: 18px; font-size: 13px; color: var(--acento-2); }
.cores { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.cores legend { padding: 0; margin-bottom: 8px; }
.cor { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border: 1px solid var(--linha-2); border-radius: var(--r-1); cursor: pointer; font-size: 14.5px; font-weight: 600; transition: border-color .15s, background-color .15s; }
.cor:has(input:checked) { border-color: var(--acento); background: var(--acento-fundo); }
.cor input { accent-color: var(--acento); margin: 0; }
.amostra { width: 28px; height: 17px; border-radius: 5px; position: relative; flex-shrink: 0; }
.amostra::after { content: 'Aa'; position: absolute; inset: 0; display: grid; place-items: center; font: 700 9px var(--f-titulo); }
.amostra-preta { background: #1C1C1F; border: 1px solid #44464E; } .amostra-preta::after { color: #F3F3F0; }
.amostra-branca { background: #F1F0EC; } .amostra-branca::after { color: #1B1B1D; }
.config-medida { font-size: 12.5px; color: var(--txt-3); margin: 8px 0; }
.config-form .btn { width: 100%; margin-top: auto; }
.config-nota { font-size: 12.5px; color: var(--txt-3); text-align: center; }

/* ---- processo ---- */
.passos { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .passos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .passos { grid-template-columns: 1fr; } }
.passos li { padding: 28px 24px; border: 1px solid var(--linha); border-radius: var(--r-2); background: var(--sup-1); }
.passo-n { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font: 700 13px var(--f-titulo); color: var(--acento); background: var(--acento-fundo); border: 1px solid rgba(255, 106, 26, .22); font-variant-numeric: tabular-nums; }
.passos h3 { font-size: 19px; margin-top: 18px; }
.passos p { color: var(--txt-2); font-size: 14.5px; margin-top: 8px; }

/* ---- contato ---- */
.contato { padding: 0 0 clamp(80px, 10vw, 128px); }
.contato-in {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center;
  padding: clamp(32px, 5vw, 56px); border-radius: var(--r-3);
  background: radial-gradient(120% 140% at 100% 0%, rgba(255, 106, 26, .14), transparent 55%), var(--sup-1);
  border: 1px solid rgba(255, 106, 26, .22);
}
@media (max-width: 860px) { .contato-in { grid-template-columns: 1fr; } }
.contato h2 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.12; letter-spacing: -0.03em; }
.contato-in > div > p { color: var(--txt-2); font-size: 17px; margin-top: 16px; max-width: 52ch; }
.contato-btns { display: flex; flex-direction: column; gap: 8px; min-width: 280px; }
.contato-email { margin-top: 4px; text-align: center; font: 500 12.5px var(--f-mono); color: var(--txt-3); }

/* ---- rodape ---- */
.rodape { border-top: 1px solid var(--linha); padding: 32px 0 40px; color: var(--txt-3); font-size: 13.5px; }
.rodape-in { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; }
.rodape-stack { font: 500 12px var(--f-mono); }


/* ---- quem sou (foto em bolha) ---- */
/* foto | nome e cargo; o selo vai embaixo, alinhado ao texto (cabe igual em 375 px e no PC) */
.perfil { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 14px; row-gap: 10px; }
.perfil-foto { grid-row: span 2; }
.perfil-disp { justify-self: start; }
.perfil-foto {
  width: 76px; height: 76px; border-radius: 50%; object-fit: cover; object-position: 40% 35%;
  border: 2px solid var(--sup-1); box-shadow: 0 0 0 2px rgba(255, 106, 26, .55);
  outline: 1px solid rgba(255, 255, 255, .1); outline-offset: -1px;
}
.perfil-txt { display: flex; flex-direction: column; line-height: 1.3; }
.perfil-txt b { font: 600 16px var(--f-titulo); letter-spacing: -0.01em; }
.perfil-txt span { font-size: 13.5px; color: var(--txt-2); }
.perfil-disp {
  display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px;
  border-radius: 999px; background: rgba(52, 211, 153, .08); border: 1px solid rgba(52, 211, 153, .22);
  font-size: 12.5px; font-weight: 700; color: #9FE3C6;
}

/* ---- painel de automacoes do topo ---- */
@keyframes entra { from { opacity: 0; transform: translateY(6px); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }
.feed { display: flex; flex-direction: column; border-radius: 12px; background: var(--bg); border: 1px solid var(--linha); overflow: hidden; }
.feed-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--linha); }
.feed-cab b { font-size: 13.5px; }
.feed-vivo { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: #9FE3C6; }
.feed-vivo .ponto-vivo { width: 6px; height: 6px; }
.feed-lista { list-style: none; padding: 6px; display: grid; gap: 4px; }
.feed-lista li {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 10px; border-radius: 9px; background: var(--sup-1);
  animation: entra .45s ease-out backwards;
}
.f1 { animation-delay: .3s; } .f2 { animation-delay: .9s; } .f3 { animation-delay: 1.5s; } .f4 { animation-delay: 2.1s; }
.feed-txt { font-size: 13px; line-height: 1.4; }
.feed-lista time { font: 500 11px var(--f-mono); color: var(--txt-3); font-variant-numeric: tabular-nums; }
.feed-ico { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--sup-3); }
.feed-ico::before { content: ''; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.ico-cobranca { color: #FBBF24; --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='6' width='18' height='12' rx='2'/%3E%3Cpath d='M3 10h18M7 15h3'/%3E%3C/svg%3E"); }
.ico-pedido { color: #60A5FA; --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7l9-4 9 4-9 4z'/%3E%3Cpath d='M3 7v10l9 4 9-4V7M12 11v10'/%3E%3C/svg%3E"); }
.ico-estoque { color: var(--acento); --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 20V10M10 20V4M16 20v-7M22 20H2'/%3E%3C/svg%3E"); }
.ico-cliente { color: var(--verde); --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3C/svg%3E"); }

/* ---- contato com rosto ---- */
.contato-foto {
  width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: 35% 30%; margin-bottom: 20px;
  box-shadow: 0 0 0 3px var(--sup-1), 0 0 0 5px rgba(255, 106, 26, .5);
}


/* so aparece para o publico do Brasil (impressao 3D e local, de Umuarama) */
body:not([data-lang="pt"]) [data-so="pt"] { display: none !important; }
.centro { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 40px; text-align: center; }

/* ---- biblioteca de projetos ---- */
.secao-biblioteca { background: linear-gradient(180deg, rgba(255, 255, 255, .015), transparent 30%); }
.filtros { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: -16px 0 40px; }
.filtros button {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 16px;
  border-radius: 999px; border: 1px solid var(--linha-2); background: var(--sup-1); cursor: pointer;
  font-weight: 700; font-size: 14px; color: var(--txt-2);
  transition-property: background-color, border-color, color; transition-duration: .15s;
}
.filtros button:hover { color: var(--txt); border-color: rgba(255, 255, 255, .2); }
.filtros button[aria-pressed="true"] { background: var(--txt); border-color: var(--txt); color: var(--bg); }
.filtro-n { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; font-size: 12px; background: var(--sup-3); color: var(--txt-2); font-variant-numeric: tabular-nums; }
.filtros button[aria-pressed="true"] .filtro-n { background: rgba(0, 0, 0, .12); color: var(--bg); }

.biblioteca { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.proj-card {
  grid-column: span 2; display: flex; flex-direction: column; text-align: left; padding: 0; cursor: pointer;
  background: var(--sup-1); border: 1px solid var(--linha); border-radius: 20px; overflow: hidden; color: inherit;
  transition-property: border-color, transform, box-shadow; transition-duration: .2s; transition-timing-function: ease-out;
}
.proj-card.proj-grande { grid-column: span 3; }
.proj-card:hover {
  border-color: color-mix(in srgb, var(--cor) 55%, transparent); transform: translateY(-5px);
  box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--cor) 45%, transparent), 0 20px 40px -24px rgba(0, 0, 0, .9);
}
.proj-card:active { transform: translateY(-1px) scale(.995); }
.proj-capa { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--sup-2); border-bottom: 1px solid var(--linha); }
.proj-capa > img, .proj-capa > video { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.proj-card:hover .proj-capa > img, .proj-card:hover .proj-capa > video { transform: scale(1.05); }
/* luz na cor do projeto + escurecido embaixo: a capa ganha profundidade */
.proj-capa::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(20, 21, 24, .55)), radial-gradient(90% 70% at 85% 0%, color-mix(in srgb, var(--cor) 28%, transparent), transparent 60%);
  mix-blend-mode: normal; transition: opacity .3s; }
.proj-card:hover .proj-capa::after { opacity: .7; }
.capa-celular { position: absolute; z-index: 1; right: 7%; bottom: -14%; width: 24%; aspect-ratio: 9 / 16; padding: 4px; border-radius: 18px;
  background: #050506; border: 1px solid rgba(255, 255, 255, .2); box-shadow: 0 24px 40px -14px rgba(0, 0, 0, .9);
  transform: rotate(4deg); transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.proj-card:hover .capa-celular { transform: rotate(0deg) translateY(-10%); }
.capa-celular video { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; display: block; }
.proj-selos { z-index: 2; }
.proj-selos { position: absolute; left: 12px; top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.selo { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: rgba(14, 15, 17, .78); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.selo-vivo .ponto-vivo { width: 6px; height: 6px; }
.proj-corpo { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 22px; flex: 1; }
.proj-setor { font-size: 12.5px; font-weight: 700; color: color-mix(in srgb, var(--cor) 75%, white); }
.proj-titulo { font: 600 22px/1.2 var(--f-titulo); letter-spacing: -0.02em; }
.proj-resumo { color: var(--txt-2); font-size: 14.5px; line-height: 1.55; }
.proj-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0 4px; }
.proj-nums span { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 12px; background: var(--sup-2); border: 1px solid var(--linha); font-size: 12px; color: var(--txt-2); line-height: 1.35; }
.proj-nums b { font: 600 18px var(--f-titulo); color: var(--txt); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.proj-pe { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--linha); }
.proj-stack { font: 500 11.5px var(--f-mono); color: var(--txt-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-abrir { flex-shrink: 0; font-weight: 700; font-size: 14px; }
.proj-abrir::after { content: ' \2192'; color: var(--acento); }
@media (max-width: 1000px) { .biblioteca { grid-template-columns: repeat(2, minmax(0, 1fr)); } .proj-card, .proj-card.proj-grande { grid-column: span 1; } }
@media (max-width: 640px) { .biblioteca { grid-template-columns: 1fr; } }

/* ---- pagina do caso ---- */
body.com-caso { overflow: hidden; }
.caso { position: fixed; inset: 0; z-index: 100; background: rgba(6, 7, 9, .82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 16px; overflow-y: auto; }
.caso-caixa { max-width: 1400px; min-height: calc(100vh - 32px); margin: 0 auto; display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--linha-2); border-radius: 24px; animation: entra .3s ease-out; }
.caso-topo { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 16px; background: rgba(14, 15, 17, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linha); border-radius: 24px 24px 0 0; }
.caso-controles { display: flex; gap: 8px; flex-wrap: wrap; }
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 12px; background: var(--sup-1); border: 1px solid var(--linha-2); }
.seg button { height: 34px; padding: 0 14px; border: 0; border-radius: 9px; background: none; cursor: pointer; font-weight: 700; font-size: 13.5px; color: var(--txt-2); transition: background-color .15s, color .15s; }
.seg button[aria-pressed="true"] { background: var(--sup-3); color: var(--txt); box-shadow: inset 0 0 0 1px var(--linha-2); }
.caso-grid { flex: 1; display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 24px; padding: 24px; align-items: start; }
.caso-info { display: flex; flex-direction: column; gap: 10px; }
.caso-info h2 { font-size: clamp(28px, 3vw, 38px); line-height: 1.1; letter-spacing: -0.03em; margin-top: 4px; }
.caso-setor { color: var(--txt-2); font-weight: 600; font-size: 14.5px; }
.caso-resumo { font-size: 16px; line-height: 1.6; margin-top: 6px; }
.caso-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 10px 0 6px; }
.caso-nums div { padding: 12px; border-radius: 12px; background: var(--sup-1); border: 1px solid var(--linha); }
.caso-nums b { display: block; font: 600 19px/1.15 var(--f-titulo); color: color-mix(in srgb, var(--cor, #FF6A1A) 80%, white); letter-spacing: -0.01em; }
.caso-nums span { display: block; margin-top: 4px; font-size: 11.5px; line-height: 1.35; color: var(--txt-2); }
.caso-info h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--txt-3); margin-top: 14px; font-family: var(--f-texto); font-weight: 700; }
.caso-info > p:not(.eyebrow):not(.caso-setor):not(.caso-resumo) { color: var(--txt-2); font-size: 15px; }
.caso-lista { list-style: none; padding: 0; display: grid; gap: 10px; }
.caso-lista li { display: flex; gap: 10px; font-size: 14.5px; }
.caso-lista li::before { content: ''; flex-shrink: 0; width: 6px; height: 6px; margin-top: 9px; border-radius: 50%; background: var(--acento); }
.caso-stack { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.caso-stack li { font: 500 12px var(--f-mono); color: var(--txt-2); padding: 5px 10px; border-radius: 999px; border: 1px solid var(--linha); background: var(--sup-1); }
.caso-site { margin-top: 18px; align-self: flex-start; }

.caso-palco { position: sticky; top: 84px; height: calc(100vh - 140px); min-height: 520px; display: flex; align-items: center; justify-content: center; }
.palco-desktop .janela-navegador { width: 100%; height: 100%; display: flex; flex-direction: column; }
.palco-desktop .jn-tela iframe { width: calc(100% / var(--escala-desk, 1)); height: calc(100% / var(--escala-desk, 1)); transform: scale(var(--escala-desk, 1)); transform-origin: top left; }
.jn-nova { flex-shrink: 0; font-size: 12px; font-weight: 700; color: var(--txt-2); text-decoration: none; }
.jn-nova:hover { color: var(--txt); }
.jn-nova::after { content: ' \2197'; }
/* celular de verdade (390 x 800) que encolhe para caber */
.celular {
  --escala: 1;
  width: 410px; height: 820px; padding: 10px; border-radius: 52px;
  background: #050506; border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: inset 0 0 0 2px #2a2b30, 0 40px 80px -30px rgba(0, 0, 0, .9);
  transform: scale(var(--escala)); transform-origin: center;
  flex-shrink: 0;
}
.celular-tela { position: relative; width: 390px; height: 800px; border-radius: 42px; overflow: hidden; background: #fff; }
.celular-tela::before { content: ''; position: absolute; z-index: 2; left: 50%; top: 10px; width: 96px; height: 26px; margin-left: -48px; border-radius: 999px; background: #050506; }
.celular-tela iframe { width: 100%; height: 100%; border: 0; }
.palco-video .moldura-video { border-radius: 20px; overflow: hidden; border: 1px solid var(--linha-2); background: #000; box-shadow: var(--sombra); }
.video-h .moldura-video { width: 100%; aspect-ratio: 16 / 9; }
.video-v .moldura-video { height: 100%; aspect-ratio: 9 / 16; }
.moldura-video video { width: 100%; height: 100%; display: block; object-fit: contain; }
.palco-imagem { padding: 0; }
.palco-link { position: relative; width: 100%; height: 100%; border-radius: 20px; overflow: hidden; border: 1px solid var(--linha-2); display: flex; align-items: flex-end; justify-content: center; text-decoration: none; }
.palco-link img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.palco-link-txt { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 10%; padding: 18px 22px; border-radius: 16px; background: rgba(14, 15, 17, .82); backdrop-filter: blur(8px); text-align: center; font-weight: 600; }
@media (max-width: 1000px) {
  .caso-grid { grid-template-columns: 1fr; }
  .caso-palco { position: relative; top: 0; order: -1; height: 72vh; min-height: 460px; }
}
@media (max-width: 760px) {
  .caso { padding: 0; }
  .caso-caixa { border-radius: 0; border: 0; min-height: 100vh; }
  .caso-topo { border-radius: 0; }
  #caso-disps { display: none; }        /* no celular a demo ja esta no tamanho de celular */
  .caso-grid { padding: 16px; }
  .caso-palco { height: 78vh; }
  .caso-nums { grid-template-columns: 1fr 1fr 1fr; }
}

/* ---- videos: o reels vem primeiro e grande ---- */
.secao-videos { overflow: hidden; }
.videos-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
@media (max-width: 860px) { .videos-grid { grid-template-columns: 1fr; justify-items: center; } }
.reels { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.reels::before { content: ''; position: absolute; inset: 10% -30% 10% -30%; background: radial-gradient(closest-side, rgba(43, 211, 139, .28), transparent 70%); filter: blur(10px); z-index: -1; animation: pulsar 6s ease-in-out infinite alternate; }
@keyframes pulsar { to { transform: scale(1.12); opacity: .7; } }
.reels-celular {
  width: clamp(250px, 26vw, 330px); aspect-ratio: 9 / 16; padding: 9px; border-radius: 42px;
  background: #050506; border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: inset 0 0 0 2px #2a2b30, 0 50px 90px -40px rgba(0, 0, 0, .95);
  transform: rotate(-2.5deg); transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.reels:hover .reels-celular { transform: rotate(0deg) translateY(-6px); }
.reels-celular video { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 33px; background: #000; }
.reels-legenda { font-size: 13px; font-weight: 700; color: var(--txt-2); }
.videos-texto { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; max-width: 600px; }
.videos-texto h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.08; letter-spacing: -0.03em; }
.videos-texto .secao-sub { margin: 0; }
.videos-pontos { list-style: none; padding: 0; display: grid; gap: 8px; }
.videos-pontos li { display: flex; gap: 10px; font-size: 15px; }
.videos-pontos li::before { content: ''; flex-shrink: 0; width: 6px; height: 6px; margin-top: 9px; border-radius: 50%; background: var(--acento); }
.video-h { margin: 8px 0 4px; width: min(100%, 440px); display: flex; flex-direction: column; gap: 8px; }
.video-moldura { border-radius: 16px; overflow: hidden; border: 1px solid var(--linha-2); background: #000; aspect-ratio: 16 / 9; box-shadow: var(--sombra); }
.video-moldura video { width: 100%; height: 100%; display: block; object-fit: cover; }
.video-h figcaption { font-size: 13px; font-weight: 700; color: var(--txt-2); }

/* ---- 3D: formato, laranja e lista de produtos ---- */
.formas { border: 0; padding: 0; margin: 0 0 4px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.formas legend { font-size: 13px; font-weight: 700; color: var(--txt-2); padding: 0; margin-bottom: 8px; }
.forma { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border: 1px solid var(--linha-2); border-radius: var(--r-1); cursor: pointer; font-weight: 700; font-size: 14px; transition: border-color .15s, background-color .15s; }
.forma:has(input:checked) { border-color: var(--acento); background: var(--acento-fundo); }
.forma input { position: absolute; opacity: 0; pointer-events: none; }
.forma:has(input:focus-visible) { outline: 2px solid var(--acento); outline-offset: 2px; }
.amostra-laranja { background: #FF6A1A; } .amostra-laranja::after { color: #1B1B1D; }
.link-stl { align-self: center; background: none; border: 0; cursor: pointer; margin-top: 2px; }
.lista-3d-titulo { text-align: center; font-size: 22px; margin-top: 64px; }
.lista-3d { list-style: none; padding: 0; margin-top: 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .lista-3d { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .lista-3d { grid-template-columns: 1fr; } }
.lista-3d li { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border-radius: var(--r-2); border: 1px solid var(--linha); background: var(--sup-1); }
.lista-3d b { font: 600 16px var(--f-titulo); }
.lista-3d span { color: var(--txt-2); font-size: 14px; }
.local-3d span { color: var(--txt-3); font-size: 14px; }
/* chamada para a pagina 3d/ (plaquinha pet) */
.pet-chamada { display: grid; grid-template-columns: 160px 1fr auto; align-items: center; gap: 24px; margin-top: 24px; padding: 12px 24px 12px 12px; border-radius: var(--r-3); border: 1px solid var(--linha); background: var(--sup-1); text-decoration: none; transition: border-color .2s, transform .2s; }
.pet-chamada:hover { border-color: rgba(255, 106, 26, .4); transform: translateY(-2px); }
.pet-chamada img { width: 160px; height: auto; aspect-ratio: 1; object-fit: cover; object-position: center 62%; border-radius: var(--r-2); }
.pet-chamada-txt { display: flex; flex-direction: column; gap: 6px; }
.pet-chamada-txt b { font: 600 22px/1.2 var(--f-titulo); }
.pet-chamada-txt > span:last-child { color: var(--txt-2); font-size: 15px; }
@media (max-width: 700px) {
  .pet-chamada { grid-template-columns: 96px 1fr; gap: 14px; padding: 12px; }
  .pet-chamada img { width: 96px; }
  .pet-chamada-txt b { font-size: 17px; }
  .pet-chamada-txt > span:last-child { font-size: 13.5px; }
  .pet-chamada-cta { grid-column: 1 / -1; width: 100%; }
}


/* ---- entrada ao rolar (so com JS; sem JS tudo aparece normal) ---- */
.js .revelar:not(.visivel) { opacity: 0; }
.revelar.visivel { animation: surgir .8s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms) backwards; }
@keyframes surgir { from { opacity: 0; transform: translateY(26px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.nav { transition: box-shadow .3s, background-color .3s; }
.nav.rolou { background: rgba(14, 15, 17, .94); box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .9); }
.produto { transition: transform .4s cubic-bezier(.2, .7, .2, 1); will-change: transform; }
/* luz laranja bem fraca derivando atras do topo: so para nao ser um fundo morto */
.hero { position: relative; overflow: hidden; }
.hero::after { content: ''; position: absolute; z-index: -1; width: 60vw; height: 60vw; right: -15vw; top: -25vw; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 106, 26, .10), transparent); animation: derivar 18s ease-in-out infinite alternate; pointer-events: none; }
@keyframes derivar { to { transform: translate(-8vw, 10vw) scale(1.15); } }

/* ---- jogos do Roblox ---- */
.jogos-total { margin-top: 18px; color: var(--txt-2); font-size: 15px; }
.jogos-total b { font: 600 26px var(--f-titulo); color: var(--txt); font-variant-numeric: tabular-nums; margin-right: 4px; }
.jogos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.jogo-card { grid-column: span 2; display: flex; flex-direction: column; border-radius: var(--r-2); overflow: hidden; text-decoration: none;
  background: var(--sup-1); border: 1px solid var(--linha); transition-property: transform, border-color, box-shadow; transition-duration: .25s; }
.jogo-card:nth-child(-n+2) { grid-column: span 3; }
.jogo-card:hover { transform: translateY(-5px); border-color: rgba(255, 255, 255, .22); box-shadow: 0 30px 50px -28px rgba(0, 0, 0, .95); }
.jogo-capa { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--sup-2); }
.jogo-capa img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.jogo-card:hover .jogo-capa img { transform: scale(1.06); }
.jogo-info { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.jogo-icone { width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0; margin-top: -30px; border: 2px solid var(--sup-1); box-shadow: 0 6px 14px rgba(0, 0, 0, .5); }
.jogo-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.jogo-txt b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jogo-txt small { font-size: 12px; color: var(--txt-3); font-variant-numeric: tabular-nums; }
.jogo-jogar { flex-shrink: 0; height: 32px; padding: 0 14px; border-radius: 999px; display: grid; place-items: center; font-size: 13px; font-weight: 800; background: #00B06F; color: #04140D; transition: transform .2s; }
.jogo-card:hover .jogo-jogar { transform: scale(1.06); }
@media (max-width: 900px) { .jogos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .jogo-card, .jogo-card:nth-child(-n+2) { grid-column: span 1; } }
@media (max-width: 520px) { .jogos { grid-template-columns: 1fr; } }

/* ---- celular: fica no FIM para ganhar das regras acima ---- */
@media (max-width: 520px) {
  .produto-corpo { grid-template-columns: 1fr; }
  /* no celular os numeros ficam lado a lado, sem o grafico: o cartao nao vira uma torre */
  .mock-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto; }
  .mini-barras { display: none; }
  .kpi { padding: 10px; }
  .kpi b { font-size: 20px; }
  .kpi span { font-size: 11px; }
  .feed-txt { font-size: 12.5px; }
  .perfil-foto { width: 64px; height: 64px; }
  .perfil-txt span { font-size: 12.5px; }
  /* solucoes viram linhas: icone ao lado do texto, sem uma tela inteira de cartoes */
  .solucoes { gap: 8px; }
  .sol { display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; row-gap: 2px; padding: 16px; }
  .sol-ico { grid-row: span 3; width: 40px; height: 40px; }
  .sol b { margin-top: 0; font-size: 16.5px; }
  .sol > span:not(.sol-ico):not(.sol-mais) { font-size: 14px; }
  .sol-mais { padding-top: 4px; font-size: 13.5px; }
  /* jogos: o maior em destaque, os outros dois a dois */
  .jogos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .jogo-card:first-child { grid-column: 1 / -1; }
  .jogo-card:not(:first-child) .jogo-jogar { display: none; }
  .jogo-card:not(:first-child) .jogo-info { padding: 10px; gap: 8px; }
  .jogo-card:not(:first-child) .jogo-icone { width: 34px; height: 34px; margin-top: -24px; }
  .jogo-card:not(:first-child) .jogo-txt b { font-size: 13.5px; }
  .jogo-card:not(:first-child) .jogo-txt small { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}