/* ==========================================================================
   CrIAmos Lab V3 — sala experimental: cada palco ocupa a tela, sem cartões.
   ========================================================================== */
.lab-exp { border-top: 1px solid rgba(233,209,178,0.16); }
.lab-stage { position: relative; height: 86vh; height: 86svh; min-height: 540px; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; cursor: grab; }
.lab-stage:active { cursor: grabbing; }
.lab-exp--3d .lab-stage { background: radial-gradient(90% 60% at 50% 100%, rgba(121,83,51,0.45), transparent 70%), #170E06; }
.lab-exp--type .lab-stage { background: radial-gradient(80% 50% at 50% 0%, rgba(121,83,51,0.35), transparent 70%), #1D1208; }
.lab-exp--light .lab-stage { background: #0F0803; }
.lab-exp__head { position: absolute; left: var(--pad-x); top: 28px; z-index: 2; max-width: 20ch; pointer-events: none; }
.lab-exp__head .label { color: var(--champagne); }
.lab-exp__text { margin-top: 10px; font-family: var(--font-display); font-size: clamp(1.25rem, 5vw, 1.6rem); line-height: 1.25; color: var(--cream-2); text-wrap: balance; }
.lab-stage__hint { position: absolute; left: var(--pad-x); bottom: 22px; z-index: 2; display: inline-flex; align-items: center; gap: 10px; color: rgba(233,209,178,0.7); pointer-events: none; transition: opacity 500ms ease; }
.lab-stage__hint .orbit { color: var(--champagne); }
.lab-stage.is-touched .lab-stage__hint { opacity: 0; }

/* 01 — 3D */
.lab-3d { position: absolute; inset: 0; }
.lab-3d canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.lab-3d__flat { position: absolute; inset: 0; display: grid; place-items: center; color: var(--champagne); transition: opacity 400ms ease; }
.lab-3d__flat svg { width: 46%; transition: transform 600ms var(--ease-out), filter 600ms ease; }
.lab-3d.is-live .lab-3d__flat { opacity: 0; pointer-events: none; }
.lab-3d.is-fallback .lab-3d__flat { perspective: 700px; }
.lab-stage.is-touched .lab-3d.is-fallback .lab-3d__flat svg { transform: rotateY(var(--ry, 18deg)) rotateX(var(--rx, -8deg)); filter: drop-shadow(-12px 16px 20px rgba(0,0,0,0.5)); }

/* 02 — TYPE */
.lab-type { position: absolute; inset: 0; display: grid; place-items: center; perspective: 900px; overflow: hidden; }
.lab-type__word { position: relative; z-index: 1; display: flex; font-family: var(--font-display); font-size: clamp(4.6rem, 24vw, 8rem); line-height: 1; font-weight: 500; letter-spacing: -0.01em; color: var(--cream-2); transform-style: preserve-3d; transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform 700ms var(--ease-out); }
.lab-type__word .lt { position: relative; display: inline-block; transform: translateZ(var(--z, 0px)); transform-style: preserve-3d; transition: transform 500ms var(--ease-out), text-shadow 500ms ease, color 500ms ease; will-change: transform; }
.lab-type__light { position: absolute; left: 0; top: 0; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(233,209,178,0.22), rgba(233,209,178,0.06) 40%, transparent 70%); transform: translate(calc(var(--lx, 50%) - 50%), calc(var(--ly, 50%) - 50%)); opacity: 0; transition: opacity 500ms ease; pointer-events: none; mix-blend-mode: screen; }
.lab-stage.is-touched .lab-type__light { opacity: 1; }

/* 03 — LUZ */
.lab-light { position: absolute; inset: 0; }
.lab-light__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Demonstração Desktop → Mobile (seção própria, fora do Lab): desktop (--m: 0) → mobile (--m: 1). */
.lab-resp { --m: 0; position: absolute; inset: 0; }
.lab-resp__frame {
  position: absolute; left: 50%; top: 50%;
  /* desktop ≈ 16:9 (navegador paisagem) → mobile ≈ 390×844 (smartphone real) */
  width: calc(88% - var(--m) * 46%);
  aspect-ratio: calc(1.7778 - var(--m) * 1.3158);
  transform: translate(-50%, -50%);
  background: var(--ivory);
  border: 1px solid rgba(233,209,178,0.45);
  border-radius: calc(2px + var(--m) * 16px);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,0.7);
  overflow: hidden;
}
.lab-resp__frame > * { position: absolute; }
.lab-resp__frame i, .lab-resp__frame span > i { display: block; }
/* marca e navegação: o menu de quatro itens vira o botão de duas linhas */
.r-logo { left: 5%; top: 5%; width: calc(11% + var(--m) * 5%); height: calc(4% + var(--m) * 1%); background: var(--ink); }
.r-nav { right: 5%; top: 5%; display: flex; gap: 6%; width: 36%; height: 4%; opacity: calc(1 - var(--m) * 2); }
.r-nav i { flex: 1; height: 100%; background: var(--taupe); opacity: 0.55; }
.r-burger { right: 6%; top: 5%; width: 8%; height: 4%; display: flex; flex-direction: column; justify-content: space-between; opacity: calc(var(--m) * 2 - 1); }
.r-burger i { height: 1.5px; background: var(--ink); }
/* título: duas linhas grossas; no mobile ocupa a largura toda e cresce */
.r-title { left: 5%; top: calc(18% + var(--m) * -2%); width: calc(42% + var(--m) * 48%); display: flex; flex-direction: column; gap: calc(3% + var(--m) * 2%); }
.r-title i { height: calc(7px + var(--m) * 5px); background: var(--ink); }
.r-title i:last-child { width: calc(70% - var(--m) * 20%); }
/* imagem: coluna alta à direita no desktop → faixa horizontal com outro recorte no mobile */
.r-img { left: calc(52% - var(--m) * 47%); top: calc(16% + var(--m) * 20%); width: calc(43% + var(--m) * 47%); height: calc(64% - var(--m) * 38%); background: linear-gradient(160deg, var(--champagne-2), var(--champagne)); overflow: hidden; }
.r-img i { position: absolute; left: calc(30% + var(--m) * 32%); top: calc(28% - var(--m) * 10%); width: calc(44% - var(--m) * 20%); aspect-ratio: 1; border-radius: 50%; background: var(--brown-600); }
/* texto: duas colunas viram uma; a segunda coluna desaparece no mobile */
.r-col { display: flex; flex-direction: column; gap: 3%; }
.r-col i { height: 2px; background: var(--ink-3); opacity: 0.55; }
.r-col1 { left: 5%; top: calc(44% + var(--m) * 20%); width: calc(20% + var(--m) * 70%); height: 22%; }
.r-col2 { left: 27%; top: 44%; width: 18%; height: 18%; opacity: calc(1 - var(--m) * 3); }
.r-col i:nth-child(2) { width: 82%; } .r-col i:nth-child(3) { width: 90%; } .r-col i:nth-child(4) { width: 60%; }
/* botão: pequeno junto ao texto no desktop → barra inteira no mobile */
.r-btn { left: 5%; top: calc(76% + var(--m) * 6%); width: calc(18% + var(--m) * 72%); height: calc(8% + var(--m) * 2%); background: var(--ink); border-radius: calc(1px + var(--m) * 2px); }
/* barra de abas: só existe no mobile */
.r-tab { left: 0; right: 0; bottom: 0; height: 9%; display: flex; justify-content: space-around; align-items: center; border-top: 1px solid rgba(26,26,26,0.12); background: var(--ivory); transform: translateY(calc(100% - var(--m) * 100%)); }
.r-tab i { width: 6px; height: 6px; border-radius: 50%; background: var(--taupe); }
.r-tab i:nth-child(2) { background: var(--ink); }
/* alternância */
.lab-resp__toggle { position: absolute; left: 50%; bottom: 52px; transform: translateX(-50%); display: flex; align-items: center; gap: 18px; z-index: 3; }
.lab-resp__toggle .orbit { color: var(--champagne); }
.lab-resp__mode { min-height: 44px; padding: 0 4px; font-family: var(--font-ui); font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; font-weight: 500; color: rgba(233,209,178,0.45); transition: color 400ms ease; -webkit-tap-highlight-color: transparent; }
.lab-resp__mode.is-on { color: var(--cream-2); }

@media (min-width: 900px) {
  .lab-stage { height: 82vh; min-height: 600px; max-height: 820px; }
  .lab-exp__head { top: 48px; max-width: 30ch; }
  .lab-exp__text { font-size: 1.7rem; }
  .lab-type__word { font-size: clamp(7rem, 12vw, 11rem); }
  .lab-resp__frame { width: calc(80% - var(--m) * 52%); }
  .lab-resp__toggle { bottom: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .lab-type__word, .lab-type__word .lt { transition-duration: 200ms; }
}

/* variante clara: a demonstração vive na seção bege "Mobile não é o site menor." */
.mobile-story__stage .lab-resp__frame { border-color: rgba(139,111,78,0.45); box-shadow: 0 40px 80px -44px rgba(26,26,26,0.45); }
.mobile-story__stage .lab-resp__mode { color: rgba(26,26,26,0.38); }
.mobile-story__stage .lab-resp__mode.is-on { color: var(--ink); }
.mobile-story__stage .lab-resp__toggle .orbit { color: var(--taupe); }