/* AM Product Lab · site v9 (29/10/2026)
   Fonte escrita à mão (não é gerada). O HTML vem de tools/v9/build_v9.py.
   Linguagem: manual gráfico da NASA de 1976 (réguas, numeração, mono, raio zero), agora em fundo
   escuro, com referência visual na Sent Into Space (filmagem real da estratosfera) e na Diatom
   (preto profundo). Fotos de produto entram como são. Sem gradiente decorativo, glow, roxo ou orbe. */

@view-transition { navigation: auto; }

:root {
  --bg: #070b18;
  --bg2: #0a1022;
  --panel: #0e1630;
  --panel2: #142046;
  --black: #020307;
  --ink: #eceef2;
  --ink2: #c6cad3;
  --muted: #9399a7;
  --faint: #808699;
  --rule: rgba(236, 238, 242, .13);
  --rule2: rgba(236, 238, 242, .28);
  --red: #fc3d21;
  --red-ink: #ff6a52;
  --blue: #0b3d91;
  --blue-lite: #8aaaf0;
  --ok: #7fd49a;
  --f-disp: 'Archivo', 'Archivo Fallback', Helvetica, Arial, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --gut: clamp(16px, 3.4vw, 40px);
  --max: 1240px;
  --head: 60px;
  color-scheme: dark;
}
@font-face { font-family: 'Archivo Fallback'; src: local('Arial'); size-adjust: 104%; ascent-override: 88%; descent-override: 22%; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--head) + 12px); background: var(--bg); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.6 var(--f-disp); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--red); }
::selection { background: var(--red); color: #fff; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; }
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -80px; z-index: 100; background: var(--red); color: #fff; padding: 10px 14px; font: 600 13px var(--f-mono); }
.skip:focus { top: 12px; }

.mono, .num, .tag, .cap, .credit { font-family: var(--f-mono); text-transform: uppercase; letter-spacing: .1em; }
.num { font-size: 12px; font-weight: 500; color: var(--red); display: block; margin-bottom: 18px; }
.cap, .credit { font-size: 11px; color: var(--muted); letter-spacing: .08em; line-height: 1.5; }
.credit { margin-top: 28px; text-transform: none; letter-spacing: .02em; font-size: 12px; color: var(--faint); }

h2 { font: 900 clamp(30px, 5vw, 62px)/.97 var(--f-disp); font-stretch: 110%; text-transform: uppercase; letter-spacing: -.022em; text-wrap: balance; max-width: 19ch; }
h2 .r, h1 .r { color: var(--red); }
h3 { font: 800 19px/1.2 var(--f-disp); font-stretch: 104%; letter-spacing: -.005em; }
.lead { font-size: clamp(17px, 1.45vw, 20px); line-height: 1.55; color: var(--ink2); max-width: 62ch; text-wrap: pretty; margin-top: 22px; }
.lead b { color: var(--ink); font-weight: 700; }

/* ---------- botões ---------- */
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 2px solid var(--ink); background: transparent; color: var(--ink); font: 600 13px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .18s, color .18s, border-color .18s; }
.btn:hover { background: var(--ink); color: var(--bg); }
.btn.red { background: var(--red); border-color: var(--red); color: #fff; }
.btn.red:hover { background: #fff; border-color: #fff; color: var(--bg); }
.btn.sm { min-height: 38px; padding: 0 14px; font-size: 11.5px; }
.btn[disabled] { opacity: .55; cursor: progress; }
.btn .ar { transition: transform .18s; }
.btn:hover .ar { transform: translateX(3px); }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* ---------- cabeçalho-documento ---------- */
.dh { position: sticky; top: 0; z-index: 60; background: rgba(7, 11, 24, .95); border-bottom: 1px solid var(--rule); }
.dh .wrap { display: flex; align-items: center; gap: 18px; height: var(--head); }
.dh .brand { font: 900 15px/1 var(--f-disp); font-stretch: 112%; text-transform: uppercase; letter-spacing: .01em; text-decoration: none; white-space: nowrap; }
.dh .brand i { font-style: normal; color: var(--red); }
.dh .meta { font: 400 10.5px/1.35 var(--f-mono); letter-spacing: .08em; color: var(--muted); text-transform: uppercase; border-left: 1px solid var(--rule); padding-left: 16px; }
.dh .meta b { font-weight: 500; color: var(--ink2); }
.dh .sp { flex: 1; }
.lang { display: flex; border: 1px solid var(--rule2); }
.lang a { font: 600 11px/1 var(--f-mono); letter-spacing: .1em; padding: 9px 10px; text-decoration: none; color: var(--muted); }
.lang a[aria-current] { background: var(--ink); color: var(--bg); }
.lang a:not([aria-current]):hover { color: var(--ink); }
.tocb { font: 600 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; background: none; border: 1px solid var(--rule2); color: var(--ink2); padding: 0 12px; height: 31px; cursor: pointer; }
.tocb:hover { border-color: var(--ink); color: var(--ink); }
#toc { margin: 0; inset: calc(var(--head) + 8px) var(--gut) auto auto; width: min(340px, calc(100vw - 32px)); background: var(--panel); color: var(--ink); border: 1px solid var(--rule2); padding: 10px 0; }
#toc::backdrop { background: rgba(0, 0, 0, .35); }
#toc ol { list-style: none; margin: 0; padding: 0; }
#toc a { display: flex; gap: 14px; padding: 9px 18px; text-decoration: none; font: 500 13px/1.3 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink2); }
#toc a span { color: var(--red); min-width: 34px; }
#toc a:hover { background: var(--panel2); color: var(--ink); }
.dh .progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--red); transform-origin: 0 50%; transform: scaleX(0); }
@supports (animation-timeline: scroll()) {
  .dh .progress { animation: prog linear both; animation-timeline: scroll(root); }
  @keyframes prog { to { transform: scaleX(1); } }
}
@media (max-width: 1080px) { .dh .meta { display: none; } }
@media (max-width: 560px) { .dh .cta-h { display: none; } .dh .wrap { gap: 10px; } .dh .brand { font-size: 13.5px; } }

/* ---------- 1.0 hero ---------- */
/* v10 (03/11/2026): o topo ficou mais baixo para a faixa de fotos reais aparecer já na primeira tela;
   no celular a altura é a do texto e o painel de telemetria some, para a primeira foto vir logo abaixo */
.hero { position: relative; isolation: isolate; min-height: max(560px, 78svh); margin-top: calc(var(--head) * -1); padding-top: var(--head); display: flex; flex-direction: column; overflow: hidden; background: #05060a url(/img/bg-solo.jpg) center 70% / cover no-repeat; background-image: image-set(url(/img/bg-solo.avif) type('image/avif'), url(/img/bg-solo.webp) type('image/webp'), url(/img/bg-solo.jpg) type('image/jpeg')); }
@media (max-width: 560px) { .hero { min-height: 0; } .hero .ph-credit { display: none; } .hero .wrap { padding-top: 26px; padding-bottom: 10px; } .hero-foot { padding-bottom: 0; } }
.hero.gl { background: #04050a; }
.hero canvas.sky { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; display: block; }
.hero::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(4, 5, 10, .5) 0%, rgba(4, 5, 10, 0) 34%, rgba(4, 5, 10, 0) 58%, rgba(4, 5, 10, .78) 100%); }
.hero .wrap { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; padding-top: clamp(32px, 8vh, 110px); padding-bottom: 40px; width: 100%; }
/* no desktop o rodapé do topo (crédito e telemetria) fica sobreposto à cena, sem somar altura; o texto reserva espaço embaixo */
@media (min-width: 861px) { .hero > .hero-foot { position: absolute; left: 0; right: 0; bottom: 0; } .hero .wrap { padding-bottom: 104px; } }

/* v11.1 (05/11/2026): vitrine de produtos reais em formato de stories, ao lado do título (no celular, logo abaixo dele).
   Um produto grande por vez; a barra do alto enche em --vt-dur e, ao terminar, o JS passa ao próximo (animationend).
   Zoom lento na foto ativa só sem reduced-motion; com reduced-motion a vitrine continua trocando, sem zoom.
   Pausa: botão, mouse em cima, foco do teclado dentro, dedo segurando, fora da tela ou aba escondida. */
.vt { --vt-dur: 3.2s; }
.vt-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.vt-lb { font: 500 10.5px/1.3 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink2); }
.vt-lb::before { content: '●'; color: var(--red); margin-right: 8px; }
.vt-pause { flex: none; width: 30px; height: 30px; border: 1px solid var(--rule2); background: rgba(4, 5, 10, .7); color: var(--ink2); font: 600 10px/1 var(--f-mono); cursor: pointer; }
.vt-pause:hover { color: var(--ink); border-color: var(--ink); }
.vt-stage { position: relative; display: grid; border: 1px solid var(--rule2); background: #0c0e15; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.vt-slide { grid-area: 1 / 1; margin: 0; display: flex; flex-direction: column; opacity: 0; transition: opacity .7s ease; }
.vt-slide.on { opacity: 1; }
.vt-ph { aspect-ratio: 4 / 3; overflow: hidden; background: #fff; }
.vt-ph picture, .vt-ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vt-ph img { -webkit-user-drag: none; }
.vt-slide figcaption { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; padding: 12px 14px 13px; background: rgba(7, 11, 24, .97); border-top: 1px solid var(--rule2); }
.vt-slide figcaption b { font: 900 15px/1.1 var(--f-disp); font-stretch: 110%; letter-spacing: .01em; }
.vt-slide figcaption span { grid-column: 1; font: 500 10.5px/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); }
.vt-slide figcaption > * { transition: opacity .25s ease .3s; } /* a legenda que sai some antes da foto, sem sobrepor a que entra */
.vt-slide:not(.on) figcaption > * { opacity: 0; transition-delay: 0s; transition-duration: .12s; }
.vt-slide figcaption i { grid-column: 2; grid-row: 1 / span 2; align-self: center; font: 600 11px/1 var(--f-mono); font-style: normal; letter-spacing: .08em; color: var(--muted); }
.vt-seg { position: absolute; z-index: 3; top: 0; left: 0; right: 0; display: flex; gap: 5px; padding: 12px 12px 28px; background: linear-gradient(180deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); pointer-events: none; }
.vt-seg i { flex: 1; height: 3px; background: rgba(255, 255, 255, .38); overflow: hidden; }
.vt-seg b { display: block; width: 100%; height: 100%; background: #fff; transform: scaleX(0); transform-origin: 0 50%; }
.vt-seg i.done b { transform: scaleX(1); }
.vt-seg i.on b { animation: vtseg var(--vt-dur) linear forwards; }
@keyframes vtseg { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.vt-prev, .vt-next { position: absolute; z-index: 2; top: 0; bottom: 62px; padding: 0; border: 0; background: none; cursor: pointer; }
.vt-prev { left: 0; width: 34%; }
.vt-next { right: 0; width: 66%; }
.vt-prev:focus-visible, .vt-next:focus-visible { outline: 2px solid var(--red); outline-offset: -4px; }
.vt-thumbs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.vt-thumbs button { padding: 0; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--rule2); background: #fff; cursor: pointer; opacity: .5; transition: opacity .2s, border-color .2s; }
.vt-thumbs button:hover { opacity: .85; }
.vt-thumbs button[aria-current="true"] { opacity: 1; border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.vt-thumbs picture, .vt-thumbs img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vt.paused .vt-seg i.on b, .vt.paused .vt-slide.on img { animation-play-state: paused; }
@media (min-width: 861px) {
  .hero .wrap { padding-right: calc(var(--gut) + clamp(300px, 33vw, 470px) + 48px); }
  .hero .wrap h1 { font-size: clamp(36px, 4.6vw, 66px); max-width: none; } /* com a vitrine ao lado: 4 linhas em vez de 6 */
  .hero-prod { position: absolute; z-index: 1; top: calc(var(--head) + clamp(18px, 5vh, 60px)); right: calc(max(0px, (100vw - var(--max)) / 2) + var(--gut)); width: clamp(300px, 33vw, 470px); }
}
@media (max-width: 860px) {
  .hero-prod { margin: 22px 0 4px; max-width: 540px; }
  .vt-thumbs { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .vt { animation: vtin .7s cubic-bezier(.2, .7, .2, 1) both; }
  @keyframes vtin { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  .vt-slide.on img { animation: vtkb calc(var(--vt-dur) + .8s) ease-out forwards; }
  @keyframes vtkb { from { transform: scale(1); } to { transform: scale(1.08); } }
  .vt-lb::before { animation: vtpisca 1.4s steps(2, jump-none) infinite; }
  @keyframes vtpisca { 50% { opacity: .25; } }
}
@media (prefers-reduced-motion: reduce) { .vt-slide { transition-duration: .3s; } }
/* logos dos clientes logo abaixo dos botões (prova em 5 segundos); brancos, com altura ajustada por logo */
.hero .trust { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 24px 0 0; }
.hero .trust span { font: 500 10.5px/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.hero .trust ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; }
.hero .trust img { display: block; width: auto; opacity: .92; }
@media (max-width: 560px) { .hero .trust ul { gap: 12px 22px; } .hero .trust img { zoom: .85; } }
@media (max-width: 560px) { .hero .lead { font-size: 16px; margin-top: 16px; } .hero .ctas { margin-top: 24px; } .hero .ctas .btn { flex: 1 1 auto; justify-content: center; } }
.hero h1 { font: 900 clamp(36px, 5.4vw, 78px)/.94 var(--f-disp); font-stretch: 112%; text-transform: uppercase; letter-spacing: -.028em; max-width: 19ch; text-wrap: balance; }
.hero h1 .w { display: inline-block; }
/* em inglês as palavras são mais longas: ao lado das fotos o título quebraria em 6 linhas */
@media (min-width: 861px) { html[lang="en"] .hero .wrap h1 { font-size: clamp(34px, 4vw, 58px); } }
.hero .lead { max-width: 56ch; color: #dfe2e8; text-shadow: 0 1px 14px rgba(0, 0, 0, .6); }
.hero .num { color: var(--red-ink); }
.hero-foot { position: relative; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding: 0 var(--gut) 26px; max-width: var(--max); margin-inline: auto; width: 100%; }
.ph-credit { font: 400 10.5px/1.4 var(--f-mono); letter-spacing: .08em; color: rgba(236, 238, 242, .62); text-transform: uppercase; max-width: 46ch; }
.hud { font-family: var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink); border: 1px solid var(--rule2); background: rgba(4, 5, 10, .55); padding: 14px 16px; width: 290px; flex: none; }
.hud .t { font-size: 10px; color: var(--muted); margin-bottom: 10px; }
.hud .row { display: flex; justify-content: space-between; font-size: 12px; padding: 4px 0; border-top: 1px solid var(--rule); }
.hud .row b { font-weight: 600; font-variant-numeric: tabular-nums; }
.hud-bar { height: 3px; background: var(--rule); margin: 10px 0 10px; }
.hud-bar i { display: block; height: 100%; background: var(--red); transform-origin: 0 50%; transform: scaleX(1); }
.hud .src { font-size: 9.5px; color: var(--muted); line-height: 1.45; }
@media (max-width: 860px) {
  .hero-foot { flex-direction: column-reverse; align-items: flex-start; }
  .hud { width: 100%; max-width: 340px; }
}
/* sem animação de entrada no texto do topo: o movimento é a cena; o texto aparece já no primeiro quadro,
   inclusive em aba de fundo, leitor de tela e captura de tela */

/* ---------- 1.5 já na prateleira: faixa de fotos reais (arrasta no celular, setas no desktop) ---------- */
.strip-sec { display: flex; flex-direction: column; padding-block: clamp(28px, 4.5vw, 60px) clamp(40px, 5vw, 64px); background: var(--bg2); }
.strip-sec > .wrap { width: 100%; } /* filho de flex em coluna com margin auto encolheria para o conteúdo */
.strip-sec .head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 20px; }
.strip-sec .num { margin-bottom: 12px; }
.strip-sec h2 { font-size: clamp(24px, 3.2vw, 40px); max-width: 24ch; }
.strip-sec .lead { margin-top: 22px; font-size: 16px; }
.strip-nav { display: flex; gap: 8px; flex: none; }
.sbtn { width: 44px; height: 44px; border: 1px solid var(--rule2); background: none; color: var(--ink); font: 400 18px/1 var(--f-mono); cursor: pointer; }
.sbtn:hover { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.strip { --pad: max(var(--gut), calc((100vw - var(--max)) / 2 + var(--gut))); display: grid; grid-auto-flow: column; grid-auto-columns: min(380px, 78vw); gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 0 var(--pad) 12px; scroll-padding-inline: var(--pad); scrollbar-width: thin; scrollbar-color: var(--rule2) transparent; }
.strip::after { content: ''; width: 1px; }
.strip figure { margin: 0; scroll-snap-align: start; }
.strip .ph { border: 1px solid var(--rule); background: #0c0e15; overflow: hidden; aspect-ratio: 4 / 3; }
.strip .ph img { width: 100%; height: 100%; object-fit: cover; }
.strip figcaption { margin-top: 10px; }
@media (max-width: 640px) { .strip-nav { display: none; } .strip { grid-auto-columns: 78vw; gap: 10px; } }

/* ---------- seções ---------- */
.sec { position: relative; isolation: isolate; padding-block: clamp(80px, 10vw, 140px); border-top: 1px solid var(--rule); }
.sec.cv { content-visibility: auto; contain-intrinsic-size: auto 1100px; }
.sec .head { margin-bottom: clamp(36px, 5vw, 64px); }
.bgimg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.bgimg picture, .bgimg img { width: 100%; height: 100%; }
.bgimg img { object-fit: cover; }
.bgimg::after { content: ''; position: absolute; inset: 0; }
canvas.sf { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

/* revelação nativa por rolagem (sem JS; sem suporte, tudo já aparece) */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .rv { animation: rv linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    @keyframes rv { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
  }
}

/* 2.0 momento */
#momento .bgimg img { object-position: 80% 50%; opacity: .85; }
#momento .bgimg::after { background: linear-gradient(90deg, var(--bg) 28%, rgba(7, 11, 24, .45) 62%, rgba(7, 11, 24, .1)), linear-gradient(0deg, var(--bg) 0%, rgba(7, 11, 24, 0) 35%); }
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.cards3 > div { background: rgba(7, 11, 24, .9); padding: 28px 26px 30px; }
.cards3 .tag { font-size: 11px; color: var(--red-ink); margin-bottom: 14px; display: block; }
.cards3 h3 { margin-bottom: 10px; }
.cards3 p { color: var(--ink2); font-size: 15.5px; margin: 0; }
.mags { display: grid; grid-template-columns: auto auto 1fr; column-gap: clamp(28px, 5vw, 80px); row-gap: 28px; gap: 28px; margin-top: 56px; border-top: 2px solid var(--ink); padding-top: 26px; }
.mag b { display: block; white-space: nowrap; font: 900 clamp(38px, 5.4vw, 72px)/1 var(--f-disp); font-stretch: 112%; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.mag:last-child b { color: var(--red); }
.mag p { font-size: 14px; color: var(--muted); margin: 10px 0 0; max-width: 34ch; }
@media (max-width: 900px) { .cards3 { grid-template-columns: 1fr; } .mags { grid-template-columns: 1fr; gap: 22px; } }

/* 2.0 o que fazemos: os três passos usam .nao (numerais 01 02 03); abaixo, o exemplo real */
#fazemos .nao { margin-top: 0; }
.ex { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; margin-top: clamp(56px, 7vw, 96px); border-top: 2px solid var(--ink); padding-top: 30px; }
.ex figure { margin: 0; }
.ex .ph { border: 1px solid var(--rule); background: #0c0e15; overflow: hidden; aspect-ratio: 4 / 3; }
.ex .ph img { width: 100%; height: 100%; object-fit: cover; }
.ex figcaption { margin-top: 10px; }
.ex-t .tag { display: block; font-size: 11px; color: var(--red-ink); margin-bottom: 16px; }
.ex-t h3 { font: 900 clamp(24px, 2.8vw, 38px)/1.04 var(--f-disp); font-stretch: 108%; text-transform: uppercase; letter-spacing: -.015em; text-wrap: balance; margin-bottom: 22px; }
.ex-f { margin: 0; }
.ex-f div { display: grid; grid-template-columns: 104px 1fr; gap: 14px; padding: 13px 0; border-top: 1px solid var(--rule); }
.ex-f div:last-child { border-bottom: 1px solid var(--rule); }
.ex-f dt { font: 600 11px/1.7 var(--f-mono); letter-spacing: .1em; color: var(--muted); }
.ex-f div:last-child dt { color: var(--ok); }
.ex-f dd { margin: 0; color: var(--ink2); font-size: 15.5px; }
@media (max-width: 900px) { .ex { grid-template-columns: 1fr; gap: 22px; } }
@media (max-width: 480px) { .ex-f div { grid-template-columns: 1fr; gap: 4px; } }

/* 3.0 por que agora: números de mídia e o quadro da lei que obriga a NASA a divulgar */
.law { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: 10px 34px; margin-top: 44px; padding: 24px 26px; border: 1px solid var(--rule2); background: rgba(7, 11, 24, .85); max-width: 1000px; }
.law b { grid-row: span 2; font: 900 clamp(20px, 2vw, 26px)/1.08 var(--f-disp); font-stretch: 108%; text-transform: uppercase; letter-spacing: -.01em; }
.law p { margin: 0; color: var(--ink2); font-size: 16.5px; }
.law .cap { grid-column: 2; }
@media (max-width: 760px) { .law { grid-template-columns: 1fr; } .law b { grid-row: auto; } .law .cap { grid-column: 1; } }
.quote { margin: clamp(56px, 7vw, 96px) 0 0; display: grid; grid-template-columns: 120px 1fr; gap: 28px; border-top: 2px solid var(--ink); padding-top: 30px; }
.quote .tag { font-size: 11px; color: var(--red-ink); }
.quote blockquote { margin: 0; font: 500 clamp(21px, 2.5vw, 31px)/1.32 var(--f-disp); letter-spacing: -.01em; text-wrap: pretty; }
.quote blockquote::before { content: '“'; color: var(--red); }
.quote blockquote::after { content: '”'; color: var(--red); }
.quote .tr { color: var(--muted); font-size: 15px; margin: 16px 0 0; max-width: 70ch; }
.quote .who { margin-top: 20px; font: 500 12px/1.5 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); }
.quote .who b { color: var(--ink); font-weight: 600; }
@media (max-width: 760px) { .quote { grid-template-columns: 1fr; gap: 14px; } }
.press { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--rule); }
.press .cap { color: var(--faint); margin-right: 6px; }
.press a { font: 600 12.5px/1 var(--f-mono); letter-spacing: .08em; color: var(--ink2); text-decoration: none; }
.press a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--red); }

/* 3.0 categorias */
.grid-cat { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.cat { background: var(--bg); padding: 24px 22px 26px; container-type: inline-size; display: flex; flex-direction: column; min-height: 214px; }
.cat .tag { font-size: 10.5px; display: flex; justify-content: space-between; gap: 10px; margin-bottom: 26px; color: var(--muted); }
.cat .tag b { font-weight: 600; color: var(--red-ink); }
.cat.dev .tag b { color: var(--blue-lite); }
.cat h3 { font-size: 21px; margin-bottom: 10px; }
.cat p { font-size: 15px; color: var(--ink2); margin: 0; }
.cat .who { margin-top: auto; padding-top: 18px; font: 500 11px/1.3 var(--f-mono); letter-spacing: .08em; color: var(--muted); }
.cat:hover { background: var(--bg2); }
@media (max-width: 1100px) { .grid-cat { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .grid-cat { grid-template-columns: 1fr; } .cat { min-height: 0; } }
.veto { display: grid; grid-template-columns: 220px 1fr; gap: 24px; margin-top: 28px; padding: 22px 0 0; border-top: 1px solid var(--rule); }
.veto .tag { font-size: 11px; color: var(--red-ink); }
.veto p { margin: 0; color: var(--ink2); max-width: 70ch; }
@media (max-width: 760px) { .veto { grid-template-columns: 1fr; gap: 8px; } }

/* 3.5 barreira */
.nao { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; margin-top: 30px; counter-reset: n; }
.nao div { border-top: 2px solid var(--ink); padding-top: 18px; counter-increment: n; }
.nao div::before { content: '0' counter(n); display: block; font: 900 46px/1 var(--f-disp); font-stretch: 112%; color: var(--red); margin-bottom: 14px; }
.nao b { display: block; font: 600 12px/1.4 var(--f-mono); letter-spacing: .08em; margin-bottom: 8px; }
.nao p { margin: 0; color: var(--ink2); font-size: 15.5px; }
.sub3 { margin-top: clamp(56px, 7vw, 90px); font: 900 clamp(22px, 2.6vw, 30px)/1.1 var(--f-disp); font-stretch: 108%; text-transform: uppercase; letter-spacing: -.01em; max-width: 26ch; text-wrap: balance; }
@media (max-width: 900px) { .nao { grid-template-columns: 1fr; gap: 26px; } }

/* 4.0 serviços */
.rows { border-top: 2px solid var(--ink); }
.rows > div { display: grid; grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1.5fr); gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.rows .n { font: 600 13px/1 var(--f-mono); color: var(--red-ink); letter-spacing: .08em; }
.rows h3 { font-size: 21px; }
.rows p { margin: 0; color: var(--ink2); }
@media (max-width: 760px) { .rows > div { grid-template-columns: 54px 1fr; } .rows p { grid-column: 2; } }

/* 4.5 modelo */
#modelo .bgimg img { opacity: .5; object-position: 50% 60%; }
#modelo .bgimg::after { background: linear-gradient(180deg, var(--bg) 0%, rgba(7, 11, 24, .45) 45%, rgba(7, 11, 24, .88) 100%); }
.cols3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.cols3 > div { border-top: 2px solid var(--ink); padding-top: 20px; }
.cols3 b { display: block; font: 900 clamp(34px, 4.4vw, 58px)/1 var(--f-disp); font-stretch: 112%; text-transform: uppercase; letter-spacing: -.03em; margin-bottom: 14px; }
.cols3 em { font-style: normal; color: var(--red); }
.cols3 p { margin: 0; color: var(--ink2); }
@media (max-width: 900px) { .cols3 { grid-template-columns: 1fr; gap: 28px; } }

/* 4.0 quanto custa: as colunas e, abaixo, as linhas do que está incluído (.rows) */
#modelo .rows { background: rgba(7, 11, 24, .55); }
#modelo .rows > div { padding-inline: 12px; }

/* 5.0 encomendar estudo */
#estudo { background: var(--bg2); }
.est { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.est .pts { list-style: none; padding: 0; margin: 30px 0 0; border-top: 1px solid var(--rule); }
.est .pts li { display: grid; grid-template-columns: 26px 1fr; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--rule); color: var(--ink2); font-size: 15.5px; }
.est .pts li::before { content: '✓'; color: var(--ok); font-weight: 700; }
.est .priv { margin-top: 18px; font-size: 13.5px; color: var(--muted); }
.fbox { background: var(--panel); border: 1px solid var(--rule2); padding: clamp(20px, 3vw, 34px); }
.stp { display: flex; list-style: none; margin: 0 0 26px; padding: 0; counter-reset: s; }
.stp li { flex: 1; counter-increment: s; font: 600 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); padding-top: 12px; border-top: 2px solid var(--rule); }
.stp li::before { content: '0' counter(s) ' '; }
.stp li.on { color: var(--ink); border-color: var(--red); }
.stp li.ok { color: var(--muted); border-color: var(--ink2); }
.step { border: 0; margin: 0; padding: 0; min-width: 0; }
.step legend { padding: 0; margin-bottom: 18px; font: 800 20px/1.2 var(--f-disp); }
.js-form .step:not(.on) { display: none; }
html:not(.js-form) .step-nav, html:not(.js-form) .review-wrap { display: none; }
.review-wrap .lb { display: block; font-size: 11px; color: var(--ink2); margin-bottom: 8px; }
.fld { margin-bottom: 16px; }
.fld label, .fld .lb { display: block; font: 600 11px/1.3 var(--f-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink2); margin-bottom: 7px; }
.fld .hint { display: block; font-size: 13px; color: var(--muted); margin-top: 6px; }
.fld input, .fld select, .fld textarea { width: 100%; background: var(--bg); color: var(--ink); border: 1px solid var(--rule2); border-radius: 0; padding: 12px 13px; font: 400 16px/1.35 var(--f-disp); min-height: 48px; }
.fld textarea { min-height: 84px; resize: vertical; }
.fld select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink2) 50%), linear-gradient(135deg, var(--ink2) 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 38px; }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.fld input[aria-invalid="true"], .fld textarea[aria-invalid="true"] { border-color: var(--red-ink); }
.fld .err { color: var(--red-ink); font-size: 13.5px; margin: 6px 0 0; min-height: 0; }
.fld .err:empty { display: none; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 560px) { .two { grid-template-columns: 1fr; } }
.nda-sum { border: 1px solid var(--rule2); background: var(--bg); padding: 16px 18px; margin-bottom: 16px; }
.nda-sum b { display: block; font: 600 11px/1.3 var(--f-mono); letter-spacing: .09em; text-transform: uppercase; margin-bottom: 10px; }
.nda-sum ul { margin: 0 0 12px; padding-left: 18px; color: var(--ink2); font-size: 15px; }
.nda-sum li { margin-bottom: 4px; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--blue-lite); font: 500 14px/1.4 var(--f-disp); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.chk { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; font-size: 15px; color: var(--ink2); margin-bottom: 16px; cursor: pointer; }
.chk input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--red); }
.fbtns { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.fbtns .btn:only-child { margin-left: auto; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.res { text-align: left; }
.res h3 { font: 900 clamp(30px, 4vw, 44px)/1 var(--f-disp); font-stretch: 112%; text-transform: uppercase; margin-bottom: 16px; }
.res .proto { color: var(--red-ink); font-family: var(--f-mono); font-weight: 600; letter-spacing: .05em; }
.res .btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.res[hidden] { display: none; }
.codewrap { margin-top: 18px; }
.codewrap .lb { font-size: 14px; color: var(--ink2); margin: 0 0 8px; }
.codebox { font: 600 24px/1 var(--f-mono); letter-spacing: .12em; color: var(--ink); background: var(--bg); border: 1px dashed var(--red-ink); padding: 14px 16px; display: inline-block; user-select: all; }
@media (max-width: 960px) { .est { grid-template-columns: 1fr; } }

/* termo completo: rolável no passo 3 e em página própria */
.nda-box { max-height: 260px; overflow: auto; border: 1px solid var(--rule2); background: var(--bg); padding: 4px 18px 16px; margin-bottom: 10px; scrollbar-color: var(--rule2) transparent; }
.nda-box:focus-visible { outline-offset: 0; }
.nda-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 18px; font: 500 11px/1.4 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; }
.nda-links a { color: var(--blue-lite); }
.review { border: 1px solid var(--rule); margin: 0 0 18px; }
.review div { display: grid; grid-template-columns: 110px 1fr auto; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--rule); font-size: 14.5px; align-items: baseline; }
.review div:last-child { border-bottom: 0; }
.review dt { font: 600 10.5px/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.review dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.review button { background: none; border: 0; padding: 0; color: var(--blue-lite); font: 500 13px/1 var(--f-disp); text-decoration: underline; cursor: pointer; }
.opt { font-weight: 400; color: var(--muted); text-transform: none; letter-spacing: 0; font-family: var(--f-disp); font-size: 13px; }
.nda-text h4 { font: 700 15px/1.3 var(--f-disp); margin: 22px 0 6px; }
.nda-text p { color: var(--ink2); font-size: 15px; }
.nda-meta { font: 400 11.5px/1.6 var(--f-mono); color: var(--muted); letter-spacing: .04em; word-break: break-all; }

/* 6.0 espaço */
#espaco { padding-block: 0; border-top: 0; background: #020307; }
.esp-hero { position: relative; isolation: isolate; min-height: max(600px, 88svh); display: flex; align-items: flex-end; padding-block: 120px 70px; }
.esp-hero .bgimg img { object-position: 50% 50%; }
.esp-hero .bgimg::after { background: linear-gradient(90deg, rgba(2, 3, 7, .92) 0%, rgba(2, 3, 7, .7) 45%, rgba(2, 3, 7, .15) 80%), linear-gradient(0deg, #020307 0%, rgba(2, 3, 7, 0) 40%); }
.esp-hero h2 { font-size: clamp(32px, 4.8vw, 68px); max-width: 17ch; }
.esp-hero > .wrap { width: 100%; } /* filho de flex com margin auto encolheria para o conteúdo */
.esp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 40px; align-items: end; }
@media (max-width: 860px) { .esp-grid { grid-template-columns: 1fr; gap: 30px; } }
.esp-hero .sis { margin-top: 30px; font: 500 11px/1.6 var(--f-mono); letter-spacing: .1em; color: var(--ink2); }
.esp-body { padding-block: 10px clamp(80px, 9vw, 130px); }
.esp-body .sub3 { margin-top: 0; margin-bottom: 26px; }
.esp-cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.esp-cases > div { border-top: 2px solid var(--ink); padding-top: 18px; }
.esp-cases b { display: block; font: 900 24px/1 var(--f-disp); font-stretch: 112%; letter-spacing: .005em; }
.esp-cases b.lg { line-height: 0; min-height: 42px; display: flex; align-items: center; }
.esp-cases b.lg img { display: block; width: auto; }
.esp-cases .tag { display: block; font-size: 11px; color: var(--red-ink); margin: 10px 0 12px; }
.esp-cases p { margin: 0; color: var(--ink2); font-size: 15.5px; }
.frames { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(12px, 1.6vw, 22px); margin-top: 48px; }
.frames figure { margin: 0; }
.frames .ph { border: 1px solid var(--rule); aspect-ratio: 16 / 9; overflow: hidden; background: #05060a; }
.frames img { width: 100%; height: 100%; object-fit: cover; }
.frames figcaption { margin-top: 10px; }
.clients { margin-top: 26px; color: var(--muted); font-size: 14.5px; }
@media (max-width: 900px) { .esp-cases { grid-template-columns: 1fr; gap: 26px; } .frames { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .esp-hero .bgimg img { object-position: 62% 30%; } .esp-hero .bgimg::after { background: linear-gradient(0deg, #020307 12%, rgba(2, 3, 7, .8) 55%, rgba(2, 3, 7, .6)); } }

/* 6.5 vídeos */
.vids { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.8vw, 24px); }
.vids figure { margin: 0; }
.yt-wrap { position: relative; aspect-ratio: 16 / 9; background: #000; border: 1px solid var(--rule); overflow: hidden; }
.yt-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; cursor: pointer; background: #000; color: #fff; }
.yt img { width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: opacity .2s; }
.yt:hover img { opacity: 1; }
.yt .tg { position: absolute; left: 10px; top: 10px; font: 600 10px/1 var(--f-mono); letter-spacing: .1em; background: rgba(0, 0, 0, .72); padding: 6px 8px; }
.yt .tg::before { content: '● '; color: var(--red); }
.yt .pl { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; background: var(--red); display: grid; place-items: center; transition: transform .2s; }
.yt .pl::after { content: ''; border-left: 18px solid #fff; border-top: 11px solid transparent; border-bottom: 11px solid transparent; margin-left: 5px; }
.yt:hover .pl { transform: scale(1.06); }
.vids figcaption { margin-top: 12px; }
.vids figcaption b { display: block; font: 700 16px/1.3 var(--f-disp); margin-bottom: 4px; }
.vids figcaption span { display: block; font-size: 14px; color: var(--muted); }
.vids figcaption a { font: 500 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--blue-lite); display: inline-block; margin-top: 8px; }
@media (max-width: 900px) { .vids { grid-template-columns: 1fr; } }

/* 7.0 agência */
#agencia .bgimg img { opacity: .42; object-position: 50% 100%; }
#agencia .bgimg::after { background: linear-gradient(180deg, var(--bg) 0%, rgba(7, 11, 24, .55) 55%, rgba(7, 11, 24, .92) 100%); }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 34px; margin: 0; }
.facts div { border-top: 1px solid var(--rule2); padding: 16px 0 22px; }
.facts dt { font: 600 11px/1 var(--f-mono); letter-spacing: .1em; color: var(--red-ink); margin-bottom: 10px; }
.facts dd { margin: 0; color: var(--ink); font-size: 16px; }
@media (max-width: 900px) { .facts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .facts { grid-template-columns: 1fr; } }

/* 7.5 faq */
.faq { border-top: 2px solid var(--ink); max-width: 900px; }
.faq details { border-bottom: 1px solid var(--rule); interpolate-size: allow-keywords; }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 18px; padding: 20px 0; font: 700 clamp(17px, 1.6vw, 20px)/1.3 var(--f-disp); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font: 400 26px/1 var(--f-mono); color: var(--red); transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--ink2); max-width: 70ch; margin: 0 0 22px; }
.faq details::details-content { height: 0; overflow: clip; transition: height .3s ease, content-visibility .3s allow-discrete; }
.faq details[open]::details-content { height: auto; }
@media (prefers-reduced-motion: reduce) { .faq details::details-content { transition: none; } }

/* 9.0 contato e rodapé */
.ft { position: relative; isolation: isolate; padding-block: clamp(90px, 11vw, 160px) 40px; border-top: 1px solid var(--rule); background: var(--bg); }
.ft h2 { font-size: clamp(36px, 6.6vw, 96px); max-width: 14ch; }
.ft .bottom { margin-top: clamp(70px, 9vw, 120px); padding-top: 22px; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 30px; font: 400 11px/1.6 var(--f-mono); letter-spacing: .06em; color: var(--faint); text-transform: uppercase; }
.ft .bottom a { color: var(--ink2); }
.legal-note { margin: 22px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--muted); max-width: 125ch; }
.legal-note b { color: var(--ink2); font-weight: 600; }

/* barra fixa no celular */
.mbar { position: fixed; z-index: 55; left: 0; right: 0; bottom: 0; display: none; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(7, 11, 24, .97); border-top: 1px solid var(--rule2); transform: translateY(110%); transition: transform .25s; }
.mbar .btn { flex: 1; justify-content: center; min-height: 46px; padding: 0 10px; font-size: 11.5px; }
.mbar.on { transform: none; }
@media (max-width: 760px) { .mbar { display: flex; } }

/* páginas do termo */
.doc { max-width: 820px; margin: 0 auto; padding: 56px var(--gut) 90px; }
.doc h1 { font: 900 clamp(28px, 4.6vw, 48px)/1 var(--f-disp); font-stretch: 110%; text-transform: uppercase; letter-spacing: -.02em; margin-bottom: 18px; }
.doc .nda-meta { margin-bottom: 26px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 12px 0; }

@media print {
  .dh, .mbar, .mq, .hero canvas, .skip { display: none !important; }
  body { background: #fff; color: #000; }
}