/* ==========================================================================
   LAB 216 — Sistema
   Um estúdio multilinguagem. Um sinal, vários estados de saída.
   216 = 6 x 6 x 6 — a grade base do sistema é de 6.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Superfícies — o sinal eletrônico */
  --ink:        #0B0B0C;
  --ink-2:      #121215;
  --ink-3:      #191A1D;
  --ink-line:   #27282D;

  /* Superfícies — o sinal físico */
  --paper:      #F2F0EA;
  --paper-2:    #E8E5DC;
  --paper-line: #D2CEC2;

  /* Sinal */
  --signal:     #E6402A;
  --signal-ink: #C3301C;   /* variante legível sobre papel */
  --live:       #23AC0C;   /* o ponto final da marca */

  /* Tinta de processo — usada SÓ no motivo MATÉRIA */
  --c: #00A7E1;
  --m: #E6007E;
  --y: #FFD400;
  --k: #1A1A1A;

  /* Papéis de parede da banda corrente (trocados por .band--*) */
  --bg:       var(--ink);
  --fg:       #F2F0EA;
  --fg-dim:   #9A9AA2;
  --fg-faint: #7C7D86;
  --line:     var(--ink-line);
  --accent:   var(--signal);
  --surface:  var(--ink-2);

  /* Tipografia */
  --display: "Archivo", system-ui, sans-serif;
  --body:    "Archivo", system-ui, sans-serif;
  --serif:   "Instrument Serif", Georgia, serif;
  --mono:    "IBM Plex Mono", ui-monospace, monospace;

  --t-mega:  clamp(3.25rem, 13vw, 12.5rem);
  --t-hero:  clamp(2.6rem, 8.2vw, 7rem);
  --t-h2:    clamp(2rem, 5vw, 4.25rem);
  --t-h3:    clamp(1.5rem, 2.6vw, 2.35rem);
  --t-lead:  clamp(1.0625rem, 1.55vw, 1.4375rem);
  --t-body:  clamp(1rem, 1.05vw, 1.0625rem);
  --t-small: 0.8125rem;
  --t-micro: 0.6875rem;

  /* Ritmo — múltiplos de 6 */
  --u:  6px;
  --s1: 6px;   --s2: 12px;  --s3: 18px;  --s4: 24px;
  --s5: 36px;  --s6: 48px;  --s7: 72px;  --s8: 108px;
  --s9: 144px; --s10: 216px;

  --gutter: clamp(18px, 4.2vw, 60px);
  --chpad:  min(24px, clamp(18px, 4.2vw, 60px));
  --maxw:   1560px;

  --head-h: 66px;   /* medido e reescrito pelo JS */

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur:  0.6s;
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;                 /* fallback sem JS */
  scroll-padding-top: calc(var(--head-h) + var(--s5));
}
/* com JS a rolagem e animada a mao, com curva mais longa: o smooth nativo
   precisa sair de cena ou os dois brigam pelo mesmo scrollTop */
html.js-nav { scroll-behavior: auto; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---- transicao entre paginas (Chrome/Edge; os demais ignoram) ---- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: pg-out .26s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: pg-in .42s var(--ease) both; }
@keyframes pg-out { to   { opacity: 0; transform: translateY(-10px); } }
@keyframes pg-in  { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 1ms; }
}

body {
  margin: 0;
  background: var(--ink);
  color: #F2F0EA;
  font-family: var(--body);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--signal); color: #fff; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -120%);
  z-index: 200; background: var(--signal); color: #fff;
  padding: 12px 24px; font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.skip-link:focus { transform: translate(-50%, 0); }

/* --------------------------------------------------------------------------
   3. BANDAS — a alternância preto/papel é o conceito
   -------------------------------------------------------------------------- */
.band {
  position: relative;
  background: var(--bg);
  color: var(--fg);
  padding-block: clamp(var(--s7), 11vw, var(--s10));
}
.band--tight { padding-block: clamp(var(--s6), 7vw, var(--s8)); }
.band--flush { padding-block: 0; }

.band--ink {
  --bg: var(--ink); --fg: #F2F0EA; --fg-dim: #9A9AA2; --fg-faint: #7C7D86;
  --line: var(--ink-line); --accent: var(--signal); --surface: var(--ink-2);
}
.band--ink-2 {
  --bg: var(--ink-2); --fg: #F2F0EA; --fg-dim: #9A9AA2; --fg-faint: #7C7D86;
  --line: var(--ink-line); --accent: var(--signal); --surface: var(--ink-3);
}
.band--paper {
  --bg: var(--paper); --fg: #101012; --fg-dim: #5E5A52; --fg-faint: #6E6A5C;
  --line: var(--paper-line); --accent: var(--signal-ink); --surface: var(--paper-2);
}
.band--signal {
  --bg: var(--signal-ink); --fg: #FFFFFF; --fg-dim: rgba(255,255,255,.88);
  --fg-faint: #FFFFFF; --line: rgba(255,255,255,.34);
  --accent: #FFFFFF; --surface: rgba(0,0,0,.14);
}

/* grão fino: dá matéria à tela sem virar textura falsa */
.band--grain::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: 0.035; mix-blend-mode: overlay; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.band > * { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   4. GRADE — 6 colunas na base, 12 no desktop
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%; max-width: var(--maxw);
  margin-inline: auto; padding-inline: var(--gutter);
}
.grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--s4) var(--s5);
}
@media (min-width: 900px) { .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } }

.col-full { grid-column: 1 / -1; }
@media (min-width: 900px) {
  /* so o FIM: assim .start-* pode fixar o inicio sem zerar o span
     (grid-column: span N definiria inicio e fim de uma vez) */
  .col-3  { grid-column-end: span 3; }
  .col-4  { grid-column-end: span 4; }
  .col-5  { grid-column-end: span 5; }
  .col-6  { grid-column-end: span 6; }
  .col-7  { grid-column-end: span 7; }
  .col-8  { grid-column-end: span 8; }
  .col-9  { grid-column-end: span 9; }
  .start-2 { grid-column-start: 2; }
  .start-3 { grid-column-start: 3; }
  .start-4 { grid-column-start: 4; }
  .start-5 { grid-column-start: 5; }
  .start-6 { grid-column-start: 6; }
  .start-7 { grid-column-start: 7; }
  .start-8 { grid-column-start: 8; }
  .start-9 { grid-column-start: 9; }
  .start-10 { grid-column-start: 10; }
  .start-11 { grid-column-start: 11; }
}

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* --------------------------------------------------------------------------
   5. TIPOGRAFIA
   -------------------------------------------------------------------------- */
.mono {
  font-family: var(--mono); font-size: var(--t-micro);
  text-transform: uppercase; letter-spacing: 0.14em; font-weight: 500;
  color: var(--fg-dim);
}
.mono--fg  { color: var(--fg); }
.mono--sig { color: var(--accent); }

.display {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 112%;
  line-height: 0.86;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  text-wrap: balance;
}
.mega { font-size: var(--t-mega); }
.hero-type { font-size: var(--t-hero); }
.h2 { font-size: var(--t-h2); }
.h3 { font-size: var(--t-h3); font-stretch: 100%; letter-spacing: -0.02em; }

.lead {
  font-size: var(--t-lead); line-height: 1.5;
  color: var(--fg-dim); max-width: 52ch; text-wrap: pretty;
}
.body-text { color: var(--fg-dim); max-width: 60ch; text-wrap: pretty; }
.body-text + .body-text { margin-top: var(--s4); }

.serif {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.5rem, 3.4vw, 3rem);
  line-height: 1.18; letter-spacing: -0.015em;
  text-transform: none; color: var(--fg); text-wrap: balance;
}
.serif em { font-style: italic; color: var(--accent); }

/* etiqueta de seção: número + nome, o mesmo par em todo o site */
.sec-label {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s3);
  padding-bottom: var(--s3); margin-bottom: var(--s6);
  border-bottom: 1px solid var(--line);
}
.sec-label__n {
  font-family: var(--mono); font-size: var(--t-micro);
  color: var(--accent); letter-spacing: 0.14em;
}
.sec-label__t {
  font-family: var(--mono); font-size: var(--t-micro);
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--fg-dim);
}
.sec-label__meta { margin-left: auto; }

/* --------------------------------------------------------------------------
   6. O TRAÇO — o primitivo que muda de estado
   -------------------------------------------------------------------------- */
.trace { display: block; width: 100%; height: auto; overflow: visible; }
.trace__base { stroke: var(--line); stroke-width: 1; }
.trace__mark { fill: var(--fg); }
.trace__sig  { fill: var(--accent); }

@media (prefers-reduced-motion: no-preference) {
  /* a varredura desce pelo quadro, como o raster de um monitor */
  .trace[data-mode="imagem"] .t-scan { animation: raster 4.4s linear infinite; }
  .trace[data-mode="som"] .t-bar { animation: pulse 1.15s var(--ease) infinite alternate; transform-origin: 50% 50%; transform-box: fill-box; }
  .trace[data-mode="som"] .t-bar:nth-of-type(3n)   { animation-delay: .09s; }
  .trace[data-mode="som"] .t-bar:nth-of-type(3n+1) { animation-delay: .22s; }
  .trace[data-mode="som"] .t-bar:nth-of-type(4n)   { animation-delay: .34s; }
  .trace[data-mode="materia"] .t-reg { animation: register 3.6s var(--ease) infinite; }
  .trace[data-mode="documento"] .t-stamp { animation: stamp 3.6s var(--ease) infinite; transform-origin: center; transform-box: fill-box; }
}
@keyframes raster   { from { transform: translateY(0); } to { transform: translateY(45px); } }
@keyframes pulse    { from { transform: scaleY(.28); } to { transform: scaleY(1); } }
@keyframes register { 0%, 70%, 100% { transform: translateX(0); } 20%, 50% { transform: translateX(3px); } }
@keyframes stamp    { 0%, 62%, 100% { opacity: 1; transform: scale(1); } 56% { opacity: .35; transform: scale(.94); } }

/* --------------------------------------------------------------------------
   7. CABEÇALHO
   -------------------------------------------------------------------------- */
.site-head {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 100;
  background: rgba(11, 11, 12, 0.86);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--ink-line);
}
.site-head__in {
  display: flex; align-items: center; gap: var(--s5);
  min-height: 66px; padding-block: var(--s2);
}

/* MARCA — aplicação negativa: branca sobre fundo escuro, com o ponto
   final verde. O ponto faz parte da marca; não somar outro indicador.
   Sobre papel, troque o src para lab216-positivo.png. Ver MARCA.md. */
.mark { display: inline-flex; align-items: center; }
.mark img, .mark svg { height: 26px; width: auto; }
/* no rodapé a marca entra pequena, como assinatura */
.site-foot .mark img, .site-foot .mark svg { height: 16px; }
.markword {
  display: inline-flex; align-items: center;
  font-family: var(--display); font-weight: 800; font-stretch: 112%;
  font-size: 1.0625rem; letter-spacing: -0.02em; text-transform: uppercase;
  color: #F2F0EA; white-space: nowrap;
}
.markword i { font-style: normal; color: var(--signal); }
/* indicador "no ar" fora da marca — usado nas etiquetas de status */
.mono--live { color: var(--live); }
/* Sobre papel, troque o src para assets/img/lab216-positivo.svg.
   .markword abaixo e apenas o fallback tipografico, caso o <img> saia. */
.band--paper .markword { color: #101012; }

.nav { display: none; margin-left: auto; align-items: center; gap: var(--s5); }
@media (min-width: 1000px) { .nav { display: flex; } }
.nav a {
  font-family: var(--mono); font-size: var(--t-micro);
  text-transform: uppercase; letter-spacing: 0.13em; color: #9A9AA2;
  padding-block: 6px; position: relative; transition: color .25s var(--ease);
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--signal); transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.nav a:hover, .nav a[aria-current] { color: #F2F0EA; }
.nav a:hover::after, .nav a[aria-current]::after { transform: scaleX(1); }

.head-status {
  display: none;
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: 0.13em; color: #8A8B93; text-transform: uppercase;
}
@media (min-width: 1280px) { .head-status { display: block; } }

.nav-toggle {
  margin-left: auto; display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.13em;
  text-transform: uppercase; color: #F2F0EA; padding: 10px 2px; min-height: 44px;
}
@media (min-width: 1000px) { .nav-toggle { display: none; } }
.nav-toggle__bars { display: grid; gap: 4px; width: 20px; }
.nav-toggle__bars span { height: 1.5px; background: currentColor; transition: transform .3s var(--ease), opacity .2s; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.drawer {
  display: grid; grid-template-rows: 0fr;
  background: var(--ink); border-top: 1px solid transparent;
  transition: grid-template-rows .45s var(--ease), border-color .25s linear;
}
.drawer > .wrap {
  overflow: hidden; min-height: 0; visibility: hidden;
  transition: visibility 0s linear .45s;
}
.drawer[data-open="true"] { grid-template-rows: 1fr; border-top-color: var(--ink-line); }
.drawer[data-open="true"] > .wrap { visibility: visible; transition-delay: 0s; }
@media (min-width: 1000px) { .drawer { display: none !important; } }
@media (prefers-reduced-motion: reduce) {
  .drawer, .drawer > .wrap { transition: none; }
}
.drawer a {
  display: flex; align-items: baseline; gap: var(--s3);
  padding: 15px 0; border-bottom: 1px solid var(--ink-line);
  font-family: var(--display); font-weight: 800; font-stretch: 112%;
  font-size: 1.5rem; text-transform: uppercase; letter-spacing: -0.02em;
}
.drawer .wrap > a:first-child { margin-top: var(--s3); }
.drawer .wrap > a:last-child  { margin-bottom: var(--s6); }
.drawer a span { font-family: var(--mono); font-size: var(--t-micro); color: var(--signal); letter-spacing: .14em; }
@media (prefers-reduced-motion: no-preference) {
  .drawer .wrap > a { opacity: 0; transform: translateY(-8px); transition: opacity .3s var(--ease), transform .35s var(--ease); }
  .drawer[data-open="true"] .wrap > a { opacity: 1; transform: none; }
  .drawer[data-open="true"] .wrap > a:nth-child(2) { transition-delay: .06s; }
  .drawer[data-open="true"] .wrap > a:nth-child(3) { transition-delay: .12s; }
  .drawer[data-open="true"] .wrap > a:nth-child(4) { transition-delay: .18s; }
}

/* --------------------------------------------------------------------------
   8. HERO
   -------------------------------------------------------------------------- */
.hero { padding-block: clamp(var(--s7), 9vw, var(--s9)) clamp(var(--s6), 6vw, var(--s8)); }
.hero__kicker { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin-bottom: var(--s5); }
.hero__title { margin-bottom: var(--s5); }
.hero__title .dot { color: var(--signal); }
.hero__foot { display: grid; gap: var(--s6); align-items: end; margin-top: var(--s7); }
@media (min-width: 1000px) { .hero__foot { grid-template-columns: 1fr minmax(360px, 42%); } }

/* o painel de sinal: entra → passa → sai */
.signal-panel {
  border: 1px solid var(--line); background: var(--surface);
  padding: var(--s4) var(--s5) var(--s5);
}
.signal-panel__head {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--s4); padding-bottom: var(--s3); margin-bottom: var(--s4);
  border-bottom: 1px solid var(--line);
}
.signal-panel__stage { display: grid; align-content: center; }
/* no estreito, título e mostrador não disputam a mesma linha */
@media (max-width: 560px) {
  .signal-panel__head { flex-direction: column; align-items: flex-start; gap: var(--s1); }
}

/* ---- DIAL DE SINTONIA -----------------------------------------------------
   A escala é permanente: é o dial. O traço embaixo é o estado de saída da
   estação sintonizada. As cinco estações caem sempre sobre uma marcação —
   duas divisões maiores entre uma e a seguinte.
   -------------------------------------------------------------------------- */
.dial { position: relative; height: 64px; }
.dial__scale { display: block; width: 100%; height: 100%; overflow: visible; }
.dial__scale line {
  stroke-width: 1; vector-effect: non-scaling-stroke;
  transition: stroke .22s var(--ease);
}
.dial__scale .t-base  { stroke: var(--line); }
.dial__scale .t-fine  { stroke: var(--line); }
.dial__scale .t-major { stroke: var(--fg-faint); }
.dial__scale .t-det   { stroke: var(--fg-dim); }
/* a estação sintonizada acende a própria marca e as duas vizinhas */
.dial__scale .is-lit  { stroke: var(--fg); }

.dial__needle {
  position: absolute; left: 0; top: -5px; bottom: -5px; width: 2px;
  background: var(--accent); pointer-events: none; will-change: transform;
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* o cursor de plástico do receiver, no topo da haste */
.dial__needle::before {
  content: ""; position: absolute; top: 0; left: -4px;
  width: 10px; height: 3px; background: var(--accent);
}
/* reposicionar por causa de resize não deve animar */
.dial.is-sizing .dial__needle { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .dial__needle { transition: none; }
  .dial__scale line { transition: none; }
}


.signal-panel__out {
  display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4);
  padding-top: var(--s3); border-top: 1px solid var(--line);
}
.chip {
  font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--fg-faint);
  border: 1px solid var(--line); padding: 7px 11px; min-height: 30px;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.chip[data-active="true"] { color: var(--fg); border-color: var(--accent); }
button.chip { cursor: pointer; font-weight: 500; }
button.chip:hover { color: var(--fg); }
.signal-panel__out[data-stations] { gap: var(--s2); }

/* --------------------------------------------------------------------------
   9. CANAIS / LINGUAGENS
   -------------------------------------------------------------------------- */
.channels {
  display: grid; gap: 1px; background: var(--line);
  border-block: 1px solid var(--line);
  margin-inline: calc(var(--chpad) * -1);
}
@media (min-width: 720px)  { .channels { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .channels { grid-template-columns: repeat(5, 1fr); } }

.channel {
  display: flex; flex-direction: column; gap: var(--s4);
  background: var(--bg); padding: var(--s5) var(--chpad);
  min-height: 356px; position: relative; isolation: isolate;
  transition: background .4s var(--ease);
}
.channel::after {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease);
}
a.channel:hover, a.channel:focus-visible { background: var(--surface); }
a.channel:hover::after, a.channel:focus-visible::after { transform: scaleX(1); }
.channel__n { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .14em; color: var(--accent); }
.channel__name {
  font-family: var(--display); font-weight: 800; font-stretch: 112%;
  font-size: clamp(1.75rem, 2.6vw, 2.5rem); line-height: .9;
  letter-spacing: -.03em; text-transform: uppercase;
}
.channel__desc { font-size: var(--t-small); color: var(--fg-dim); line-height: 1.5; }
.channel__trace { margin-top: auto; }
.channel__go {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .13em;
  text-transform: uppercase; color: var(--fg-faint);
  padding-top: var(--s3); border-top: 1px solid var(--line);
  transition: color .3s var(--ease); align-items: baseline; gap: var(--s2);
}
.channel__go .arrow { flex: none; }
a.channel:hover .channel__go { color: var(--fg); }
a.channel:hover .channel__go .arrow { transform: translateX(5px); }
.arrow { display: inline-block; transition: transform .35s var(--ease); }

.channel--open .channel__name { color: var(--fg-faint); }
.channel--open .channel__frame {
  flex: 1; border: 1px dashed var(--line); margin-top: auto;
  display: grid; place-items: center; min-height: 68px;
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: .14em; color: var(--fg-faint); text-align: center; padding: var(--s3);
}

/* --------------------------------------------------------------------------
   10. PROCESSO / PASSOS
   -------------------------------------------------------------------------- */
.steps { display: grid; gap: 1px; background: var(--line); }
@media (min-width: 760px)  { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { background: var(--bg); padding: var(--s5) var(--s4); display: flex; flex-direction: column; gap: var(--s3); }
.step__n {
  font-family: var(--display); font-weight: 800; font-stretch: 112%;
  font-size: clamp(2.5rem, 4vw, 3.75rem); line-height: .8;
  color: transparent; -webkit-text-stroke: 1px var(--fg-faint);
}
.step__t { font-family: var(--display); font-weight: 800; font-stretch: 100%; font-size: 1.125rem; text-transform: uppercase; letter-spacing: -.01em; }
.step__d { font-size: var(--t-small); color: var(--fg-dim); line-height: 1.55; }

/* --------------------------------------------------------------------------
   11. HOMOLOGAÇÃO — a prova técnica
   -------------------------------------------------------------------------- */
.specs {
  display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.spec { background: var(--bg); padding: var(--s5) var(--s4); display: flex; flex-direction: column; gap: var(--s2); }
.spec__k { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .14em; color: var(--fg-faint); }
.spec__v {
  font-family: var(--display); font-weight: 800; font-stretch: 100%;
  font-size: clamp(1.375rem, 2.1vw, 1.875rem); letter-spacing: -.02em;
  text-transform: uppercase; line-height: 1;
}
.spec__d { font-size: var(--t-small); color: var(--fg-dim); margin-top: var(--s1); }

/* --------------------------------------------------------------------------
   12. TRABALHOS
   -------------------------------------------------------------------------- */
.works { display: grid; gap: var(--s5); }
@media (min-width: 780px)  { .works { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .works { grid-template-columns: repeat(3, 1fr); } }
.work { display: flex; flex-direction: column; gap: var(--s3); }
.work__frame {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  display: grid; place-items: center;
}
.work__ph {
  font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .16em;
  color: var(--fg-faint); text-transform: uppercase; text-align: center;
  padding: var(--s4); line-height: 1.9;
}
.work__meta { display: flex; justify-content: space-between; gap: var(--s3); align-items: baseline; }
.work__t { font-family: var(--display); font-weight: 800; font-stretch: 100%; font-size: 1.125rem; text-transform: uppercase; letter-spacing: -.01em; }
.work__c { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .13em; color: var(--fg-faint); white-space: nowrap; }

/* ---- GALERIA DO TRABALHO: 7 quadros, como uma tira de contato ---------- */
.work__frame { isolation: isolate; }
.work__shot {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity .35s var(--ease);
}
.work__shot[data-on="true"] { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .work__shot { transition: none; } }

.work__count {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .12em;
  color: var(--fg); background: rgba(0, 0, 0, .62); padding: 4px 8px;
  font-variant-numeric: tabular-nums;
}
.work__nav {
  position: absolute; top: 0; bottom: 0; width: 46px; z-index: 2;
  display: grid; place-items: center; color: var(--fg);
  background: linear-gradient(90deg, rgba(0,0,0,.5), transparent);
  opacity: 0; transition: opacity .25s var(--ease);
  font-family: var(--mono); font-size: 1rem;
}
.work__nav--next { right: 0; background: linear-gradient(270deg, rgba(0,0,0,.5), transparent); }
.work__nav--prev { left: 0; }
.work__frame:hover .work__nav,
.work__nav:focus-visible { opacity: 1; }
.work__nav[disabled] { opacity: 0 !important; pointer-events: none; }

/* a tira: um quadro por imagem, o corrente em vermelho */
.work__strip { display: flex; gap: 3px; }
.work__tick {
  flex: 1; height: 3px; background: var(--line); min-width: 0;
  padding: 7px 0; background-clip: content-box;
  transition: background-color .25s var(--ease);
}
.work__tick[data-on="true"] { background-color: var(--accent); }
.work__tick:hover { background-color: var(--fg-dim); }
.work__tick[data-on="true"]:hover { background-color: var(--accent); }

/* mural de clientes */
.clients { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 560px)  { .clients { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .clients { grid-template-columns: repeat(6, 1fr); } }
.client img { max-width: 62%; max-height: 54%; width: auto; object-fit: contain; }
.client {
  background: var(--bg); aspect-ratio: 3 / 2; display: grid; place-items: center;
  font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .14em;
  color: var(--fg-faint); text-align: center; padding: var(--s3);
}

/* --------------------------------------------------------------------------
   13. BOTÕES
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: var(--s4); min-height: 52px; padding: 14px 22px;
  font-family: var(--mono); font-size: var(--t-small); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--fg); color: var(--fg); background: transparent;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn:hover { background: var(--fg); color: var(--bg); }
.btn:hover .arrow { transform: translateX(5px); }
.btn--signal { background: var(--signal); border-color: var(--signal); color: #fff; }
.btn--signal:hover { background: #fff; border-color: #fff; color: var(--ink); }
.btn--ghost { border-color: var(--line); color: var(--fg-dim); }
.btn--ghost:hover { border-color: var(--fg); background: transparent; color: var(--fg); }
.btn--wide { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); }
@media (max-width: 560px) { .btn-row > .btn { width: 100%; } }

/* --------------------------------------------------------------------------
   14. FORMULÁRIO
   -------------------------------------------------------------------------- */
.form { display: grid; gap: var(--s5); }
.field { display: grid; gap: var(--s2); }
.field label {
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: .14em; text-transform: uppercase; color: var(--fg-dim);
}
.field input, .field textarea, .field select {
  font-family: var(--body); font-size: 1rem; color: var(--fg);
  background: transparent; border: 0; border-bottom: 1px solid var(--line);
  padding: 12px 0; min-height: 48px; width: 100%; border-radius: 0;
  transition: border-color .3s var(--ease);
}
.field textarea { resize: vertical; min-height: 128px; line-height: 1.6; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-bottom-color: var(--accent);
}
.field input::placeholder, .field textarea::placeholder { color: var(--fg-faint); }
.field select option { background: var(--ink); color: #F2F0EA; }
.field__hint { font-size: var(--t-small); color: var(--fg-faint); }

.pickers { display: flex; flex-wrap: wrap; gap: var(--s2); }
.picker { position: relative; }
.picker input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.picker span {
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: .12em; text-transform: uppercase; color: var(--fg-dim);
  border: 1px solid var(--line); padding: 12px 16px; min-height: 44px;
  display: inline-flex; align-items: center; cursor: pointer;
  transition: border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}
.picker input:checked + span { border-color: var(--accent); color: var(--fg); background: var(--surface); }
.picker input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   15. RODAPÉ
   -------------------------------------------------------------------------- */
.site-foot { background: var(--ink); color: #F2F0EA; padding-block: var(--s8) var(--s6); }
.foot-grid { display: grid; gap: var(--s6); }
@media (min-width: 900px) { .foot-grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }
.foot-h { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .14em; text-transform: uppercase; color: #8A8B93; margin-bottom: var(--s4); }
.foot-list li { margin-bottom: 11px; }
.foot-list a { color: #9A9AA2; transition: color .25s var(--ease); font-size: var(--t-small); }
.foot-list a:hover { color: #F2F0EA; }
.colophon {
  margin-top: var(--s7); padding-top: var(--s4); border-top: 1px solid var(--ink-line);
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5);
  font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .1em;
  text-transform: uppercase; color: #8A8B93;
}

/* --------------------------------------------------------------------------
   16. REVELAÇÃO NA ROLAGEM
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
  [data-reveal].is-in { opacity: 1; transform: none; }
  [data-reveal-stagger] > * { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
  [data-reveal-stagger].is-in > * { opacity: 1; transform: none; }
  [data-reveal-stagger].is-in > *:nth-child(2) { transition-delay: .07s; }
  [data-reveal-stagger].is-in > *:nth-child(3) { transition-delay: .14s; }
  [data-reveal-stagger].is-in > *:nth-child(4) { transition-delay: .21s; }
  [data-reveal-stagger].is-in > *:nth-child(5) { transition-delay: .28s; }
  [data-reveal-stagger].is-in > *:nth-child(6) { transition-delay: .35s; }
}

/* --------------------------------------------------------------------------
   17. PÁGINA DE LINGUAGEM
   -------------------------------------------------------------------------- */
.lang-hero { padding-block: clamp(var(--s7), 8vw, var(--s9)) var(--s7); }
.lang-hero__n {
  font-family: var(--display); font-weight: 800; font-stretch: 125%;
  display: block; font-size: clamp(3.5rem, 10vw, 9.5rem); line-height: .8;
  color: transparent; -webkit-text-stroke: 1px var(--line);
  letter-spacing: -.04em; user-select: none;
}
.deliverables { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 680px)  { .deliverables { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .deliverables { grid-template-columns: repeat(3, 1fr); } }
.deliverable { background: var(--bg); padding: var(--s5) var(--s4); display: flex; flex-direction: column; gap: var(--s2); }
.deliverable__t { font-family: var(--display); font-weight: 800; font-stretch: 100%; font-size: 1.0625rem; text-transform: uppercase; letter-spacing: -.01em; }
.deliverable__d { font-size: var(--t-small); color: var(--fg-dim); line-height: 1.55; }

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: var(--s4) 0; min-height: 44px;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  font-family: var(--display); font-weight: 800; font-stretch: 100%;
  font-size: clamp(1.0625rem, 1.7vw, 1.375rem); text-transform: uppercase; letter-spacing: -.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); font-size: 1.25rem; color: var(--accent); transition: transform .3s var(--ease); flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { padding-bottom: var(--s5); color: var(--fg-dim); max-width: 68ch; }

.pager { display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
@media (min-width: 720px) { .pager { grid-template-columns: repeat(2, 1fr); } }
.pager a { background: var(--bg); padding: var(--s6) var(--gutter); display: flex; flex-direction: column; gap: var(--s2); transition: background .35s var(--ease); }
.pager a:hover { background: var(--surface); }
.pager a:last-child { text-align: right; align-items: flex-end; }
.pager__t { font-family: var(--display); font-weight: 800; font-stretch: 112%; font-size: clamp(1.5rem, 3vw, 2.25rem); text-transform: uppercase; letter-spacing: -.03em; }

/* --------------------------------------------------------------------------
   18. NOTA DE PLACEHOLDER — conteúdo real ainda pendente
   -------------------------------------------------------------------------- */
.todo {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .12em;
  text-transform: uppercase; color: var(--fg-faint);
  border: 1px dashed var(--line); padding: 9px 13px;
}
.todo::before { content: ""; width: 6px; height: 6px; background: var(--accent); flex: none; }

@media print {
  .site-head, .nav, .drawer, .nav-toggle, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  .band { padding-block: 24pt; }
}