/* stauf.com.br — peças da versão "serviço" (02/11/2026). O layout e a identidade do site atual ficam intactos;
   muda a narrativa. Operator, 02/11, ao ver a 1ª prévia (blocos grandes de dashboard): «pedi apenas pra mudar a
   narrativa, se fosse apresentar algo de projeto, teria q ser algo discreto num carrossel». Por isso os projetos são
   um trilho só, de cartões pequenos e apagados. Usa só as variáveis de styles.css (:root). */

/* ── como eu trabalho (a órbita do antigo bloco do Axis, com as logos) ─── */
#metodo .px-texto h2 { font-size: clamp(38px, 4.6vw, 68px); line-height: 1; letter-spacing: -.035em; }
#metodo .px-texto h2 em { font-style: normal; color: var(--accent-text); }
/* fundo próprio: sem ele a linha vertical da órbita (.produto-eixo) atravessa o texto da lista */
.metodo { position: relative; z-index: 1; display: grid; gap: 18px; max-width: 620px; margin: 30px auto 0; padding: 22px 24px; list-style: none; text-align: left; background: var(--bg); }
.metodo li { padding-left: 18px; border-left: 2px solid var(--accent); }
.metodo strong { display: block; margin-bottom: 4px; font-weight: 600; }
.metodo span { color: var(--muted); line-height: 1.55; }

/* ── serviços ─────────────────────────────────────────────────────────── */
.ofertas { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.oferta { display: flex; flex-direction: column; gap: 10px; padding: 26px 24px; border: 1px solid var(--line); background: var(--card); }
.oferta .reg, .projeto .reg { display: block; color: var(--accent-text); font: 500 11px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.oferta h3 { margin: 6px 0 0; font: 600 22px/1.2 var(--display); }
.oferta p { flex: 1; margin: 0; color: var(--muted); line-height: 1.6; }
.oferta .door { display: inline-block; margin-top: 8px; padding: 10px 0; color: var(--ink); font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.oferta .door:hover { color: var(--accent-text); }

/* ── projetos: um trilho discreto ─────────────────────────────────────── */
.projetos { padding-top: 40px; padding-bottom: 40px; }
.projetos-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.projetos-topo .kicker { margin-bottom: 6px; }
.projetos h2 { margin: 0; font: 600 clamp(20px, 1.8vw, 26px)/1.2 var(--display); }
.projetos h2 em { font-style: normal; color: var(--dim); }
.trilho { display: flex; gap: 14px; margin: 0; padding: 0 0 4px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.trilho::-webkit-scrollbar { display: none; }
.trilho:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
.projeto { flex: 0 0 clamp(220px, 24vw, 300px); scroll-snap-align: start; padding: 10px 10px 14px; border: 1px solid var(--line); background: var(--card); }
.projeto img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: 12px; opacity: .55; filter: grayscale(.85); transition: opacity var(--dur-acordeao, 220ms) ease, filter var(--dur-acordeao, 220ms) ease; }
.projeto:hover img { opacity: .9; filter: grayscale(.2); }
.projeto strong { display: block; margin-top: 6px; font-weight: 500; font-size: 15px; line-height: 1.35; color: var(--muted); }
.trilho-ctrl { display: flex; gap: 8px; }
.trilho-ctrl[hidden] { display: none; }   /* o display:flex acima venceria o [hidden] do navegador (captura de 02/11) */
.trilho-ctrl button { width: 40px; height: 32px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); font: 500 15px/1 var(--mono); cursor: pointer; }
.trilho-ctrl button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-text); }
.trilho-ctrl button:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.trilho-ctrl button:disabled { opacity: .35; cursor: default; }

@media (prefers-reduced-motion: reduce) { .projeto img { transition: none; } }

/* ── área 3D de projetos (02/11/2026) ─────────────────────────────────────
   Operator: as prévias «saem de dentro da caixa» com efeito 3D, ficam «soltas no ar», mexem um pouco no hover com
   o funcionamento real da tela, clique expande mais, fechar/abrir a próxima. Escolha dele: CSS 3D + View Transitions
   nativo (sem biblioteca). O cartão vira o painel pela view-transition-name «proj-foco» (projetos3d.js). */
.projeto { position: relative; cursor: pointer; }
.projeto:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
.projeto .abrir { position: absolute; inset: 0; z-index: 1; border: 0; background: transparent; cursor: pointer; }
.projeto .abrir:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }

html.palco-aberto { overflow: hidden; }
.palco3d { position: fixed; inset: 0; z-index: 90; display: grid; grid-template-rows: auto 1fr auto; gap: 8px;
  background: rgb(6, 6, 7); }   /* sem o gradiente radial: medido 02/11, 94-95 quadros em 3 s contra 85-87 com ele */
/* sem backdrop-filter: medido 02/11 (CPU 4x lenta), o desfoque sozinho levava a mediana de 50 para 83,4 ms por quadro */
.palco3d[hidden] { display: none; }
.palco-topo { display: flex; align-items: center; justify-content: space-between; padding: 18px var(--gutter) 0; }
.palco-topo .kicker { margin: 0; }
.palco-fechar { width: 44px; height: 44px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); font: 500 18px/1 var(--mono); cursor: pointer; }
.palco-fechar:hover { border-color: var(--accent); color: var(--accent-text); }

.palco-cena { position: relative; perspective: 1700px; perspective-origin: 50% 45%; overflow: hidden; touch-action: pan-y;
  animation: flutua 7s ease-in-out infinite; will-change: transform; }   /* a cena inteira flutua: 1 camada (p95 33,5 ms contra 50 ms flutuando os 4) */
.painel { position: absolute; left: 50%; top: 50%; width: min(62vw, 980px, calc((100dvh - 300px) * 16 / 9)); aspect-ratio: 16 / 9; margin: 0; padding: 0; border: 0;
  background: transparent; cursor: pointer; transform-style: preserve-3d; translate: -50% -50%;
  transition: transform .9s var(--ez), opacity .9s var(--ez), filter .9s var(--ez); }
.painel-flutua { position: absolute; inset: 0; transform-style: preserve-3d; }
.painel-tela { position: absolute; inset: 0; overflow: hidden; border: 1px solid var(--line-strong); background: #000;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .6), 0 0 0 1px rgba(244, 244, 242, .06);
  transform: rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); transition: transform .35s var(--ez); }
.painel-tela img, .painel-tela video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.painel-tela video { opacity: 0; transition: opacity .3s ease; }
.painel.tocando .painel-tela video { opacity: 1; }
.painel-brilho { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s ease;
  background: radial-gradient(circle at var(--bx, 50%) var(--by, 30%), rgba(255, 255, 255, .16), transparent 55%); }
.painel:hover .painel-brilho { opacity: 1; }
.painel:focus-visible .painel-tela { outline: 1px solid rgba(198, 94, 67, .55); outline-offset: 6px; }
.painel.longe { opacity: 0; pointer-events: none; }   /* com 4 projetos: um de cada lado, o 4º fica escondido atrás */
@keyframes flutua { 0%, 100% { transform: translate3d(0, -7px, 0); } 50% { transform: translate3d(0, 7px, 0); } }

/* posição no arco: --d = distância do painel em foco (−3…3), escrito pelo projetos3d.js */
.painel { transform: translateX(calc(var(--d, 0) * 58%)) translateZ(calc(var(--ad, 0) * -340px)) rotateY(calc(var(--d, 0) * -24deg)) scale(calc(1 - var(--ad, 0) * .06));
  opacity: calc(1 - var(--ad, 0) * .28); filter: brightness(calc(1 - var(--ad, 0) * .25)); z-index: calc(10 - var(--ad, 0)); }
.palco3d.expandido .painel { opacity: 0; pointer-events: none; }
.palco3d.expandido .painel.foco { opacity: 1; pointer-events: auto; width: min(88vw, 1500px, calc((100dvh - 250px) * 16 / 9)); transform: none; }   /* cabe na altura da cena */
.palco3d.expandido .palco-cena { animation-play-state: paused; }

.palco-rodape { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 20px; padding: 0 var(--gutter) 24px; }
.palco-info .reg { display: block; color: var(--accent-text); font: 500 11px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.palco-info h3 { margin: 6px 0 6px; font: 600 clamp(20px, 2vw, 28px)/1.15 var(--display); }
.palco-info p { margin: 0; max-width: 70ch; color: var(--muted); line-height: 1.55; }
.palco-info .dica { margin-top: 8px; color: var(--dim); font: 500 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.palco-nav { display: flex; gap: 8px; }
.palco-nav button { width: 48px; height: 40px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); font: 500 16px/1 var(--mono); cursor: pointer; }
.palco-nav button:hover { border-color: var(--accent); color: var(--accent-text); }

/* entrada: os painéis que não vêm do cartão sobem de trás, um depois do outro */
.palco3d.entrando .painel:not(.foco) { animation: sai-da-caixa .9s var(--ez) both; }
.palco3d.entrando .painel:nth-child(2) { animation-delay: .06s; }
.palco3d.entrando .painel:nth-child(3) { animation-delay: .12s; }
.palco3d.entrando .painel:nth-child(4) { animation-delay: .18s; }
@keyframes sai-da-caixa { from { opacity: 0; translate: -50% 10%; } to { translate: -50% -50%; } }
::view-transition-group(proj-foco) { animation-duration: .7s; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }

/* seletor Computador | Celular (02/11) */
.palco-topo { gap: 16px; }
.palco-topo .kicker { flex: 1; }
.modo { display: inline-flex; border: 1px solid var(--line-strong); }
.modo button { padding: 10px 14px; border: 0; background: transparent; color: var(--muted); font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.modo button + button { border-left: 1px solid var(--line-strong); }
.modo button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.modo button:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
/* modo celular: o painel vira um telefone (1170:2532), com moldura; o arco abre mais porque o painel é estreito */
.palco3d.modo-celular .painel { width: calc(min(64dvh, 760px) * 1170 / 2532); aspect-ratio: 1170 / 2532;
  transform: translateX(calc(var(--d, 0) * 128%)) translateZ(calc(var(--ad, 0) * -260px)) rotateY(calc(var(--d, 0) * -22deg)) scale(calc(1 - var(--ad, 0) * .06)); }
.palco3d.modo-celular .painel-tela { border: 0; border-radius: 34px;
  box-shadow: 0 0 0 9px #0d0d0f, 0 0 0 10px rgba(244, 244, 242, .18), 0 18px 40px rgba(0, 0, 0, .6); }
.palco3d.modo-celular.expandido .painel.foco { width: calc(min(78dvh, 920px) * 1170 / 2532); }

@media (max-width: 900px) {
  .painel { width: 84vw; transform: translateX(calc(var(--d, 0) * 92%)) translateZ(calc(var(--ad, 0) * -240px)) rotateY(calc(var(--d, 0) * -18deg)); }
  .palco3d.expandido .painel.foco { width: min(94vw, calc((100dvh - 330px) * 16 / 9)); }
  .palco-rodape { grid-template-columns: 1fr; }
  .palco-nav { justify-content: flex-end; }
  .palco-topo .kicker { display: none; }
  .palco3d.modo-celular .painel { width: calc(min(58dvh, 620px) * 1170 / 2532); transform: translateX(calc(var(--d, 0) * 140%)) translateZ(calc(var(--ad, 0) * -200px)) rotateY(calc(var(--d, 0) * -16deg)); }
  .palco3d.modo-celular.expandido .painel.foco { width: calc(min(66dvh, 700px) * 1170 / 2532); }
}
@media (prefers-reduced-motion: reduce) {
  .painel, .painel-tela, .painel-tela video { transition: none; }
  .palco-cena { animation: none; }
  .painel { transform: translateX(calc(var(--d, 0) * 104%)); filter: none; }
  .palco3d.modo-celular .painel { transform: translateX(calc(var(--d, 0) * 128%)); }
  .palco3d.entrando .painel:not(.foco) { animation: none; }
  ::view-transition-group(proj-foco) { animation-duration: 0s; }
}