/* Gentalk ISP · opção B · quadro de verdade (etiqueta amarela, fita azul, número a caneta).
   Todo valor vem de tokens.css (gerado de src/temas/b/tokens.json). */

@font-face {
  font-family: "Sofia Sans";
  src: url("/assets/fonts/sofia-sans-latin-var.woff2") format("woff2");
  font-weight: 1 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sofia Sans Condensed";
  src: url("/assets/fonts/sofia-sans-condensed-latin-var.woff2") format("woff2");
  font-weight: 1 1000;
  font-style: normal;
  font-display: swap;
}
/* Só algarismos e sinais (subset); o resto cai na Sofia */
@font-face {
  font-family: "Kalam";
  src: url("/assets/fonts/kalam-700-numeros.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+20, U+24-25, U+2B-2C, U+2E, U+30-39, U+52, U+2212;
}

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--layout-header-height-mobile) + var(--space-4));
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-base);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
main { flex: 1 0 auto; }
main:focus { outline: none; }
body.is-locked { overflow: hidden; }

::selection { background: var(--bg-selection); color: var(--text-primary); }

h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
p, ul, ol, figure, blockquote, table { margin: 0; }
p, li, figcaption { text-wrap: pretty; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
address { font-style: normal; }

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: var(--border-hair);
  text-underline-offset: 0.22em;
}
@media (hover: hover) { a:hover { text-decoration-thickness: calc(2 * var(--border-hair)); } }

:focus-visible {
  outline: var(--border-focus) solid var(--focus-ring);
  outline-offset: var(--space-1);
  border-radius: var(--radius-control);
}

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

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip {
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  z-index: var(--z-skip);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-inverse);
  color: var(--text-on-inverse);
  font-weight: var(--fw-bold);
  border-radius: var(--radius-control);
  transform: translateY(calc(-100% - var(--space-6)));
}
.skip:focus { transform: none; }

.container {
  width: 100%;
  max-width: calc(var(--layout-container) + 2 * var(--space-gutter));
  margin-inline: auto;
  padding-inline: var(--space-gutter);
}

/* ---------- tipografia ---------- */

h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-heavy);
  font-size: clamp(var(--fs-h1-min), 1rem + 6vw, var(--fs-h1-max));
  line-height: var(--lh-display);
  letter-spacing: var(--tr-h1);
  overflow-wrap: break-word;
  hyphens: manual;
}

h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(var(--fs-h2-min), 1rem + 2.9vw, var(--fs-h2-max));
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-h2);
}

.voz {
  max-width: var(--measure-voice);
  font-weight: var(--fw-heavy);
  font-size: clamp(var(--fs-voice-min), 1rem + 4.6vw, var(--fs-voice-max));
  line-height: var(--lh-voice);
  letter-spacing: var(--tr-voice);
}

.h2-menor { font-size: clamp(var(--fs-h2-small-min), 1rem + 1.6vw, var(--fs-h2-small-max)); }

h3 {
  font-family: var(--font-base);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-h3);
}

.abertura, .lead {
  max-width: var(--measure-lead);
  font-size: var(--fs-lead);
  line-height: var(--lh-small);
}

.nota, .note {
  font-size: var(--fs-sm);
  line-height: var(--lh-small);
  color: var(--text-secondary);
}
.sec-voz .nota { color: var(--text-secondary-on-wall); }

/* ---------- assinatura: traço do logo (H1, menu, método) ---------- */

.trace {
  display: block;
  width: var(--layout-trace-width);
  height: var(--layout-trace-height);
  margin-bottom: var(--space-5);
  background: var(--accent-trace);
}

/* ---------- botões e links ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--layout-tap-min);
  padding: var(--space-3) var(--space-5);
  border: var(--border-hair) solid transparent;
  border-radius: var(--radius-control);
  font: inherit;
  font-weight: var(--fw-bold);
  line-height: var(--lh-small);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-quick) var(--ease-standard), transform var(--dur-instant) var(--ease-standard);
}
.btn svg { flex: none; }
.btn:active { transform: scale(0.97); }
.btn-solid { background: var(--accent-solid); color: var(--text-on-accent); }
.btn-line { background: transparent; color: var(--text-primary); border-color: var(--text-primary); }
@media (hover: hover) {
  .btn-solid:hover { background: var(--accent-solid-hover); }
  .btn-line:hover { background: var(--bg-control-hover); }
}
.btn-lg { min-height: calc(var(--layout-tap-min) + var(--space-3)); padding-inline: var(--space-6); }
.btn-sm { padding: var(--space-2) var(--space-4); font-size: var(--fs-sm); }
.btn-block { display: flex; width: 100%; }

.link-arrow {
  display: inline-block;
  padding-block: var(--space-3);
  font-weight: var(--fw-bold);
}
.link-arrow svg {
  display: inline-block;
  vertical-align: -0.2em;
  margin-left: var(--space-1);
  transition: transform var(--dur-quick) var(--ease-standard);
}
@media (hover: hover) and (pointer: fine) { .link-arrow:hover svg { transform: translateX(var(--space-1)); } }

.link-btn {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-decoration-thickness: var(--border-hair);
  text-underline-offset: 0.22em;
  cursor: pointer;
}

/* ---------- cabeçalho ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--bg-page);
  border-bottom: var(--border-hair) solid transparent;
}
/* linha e sombra numa camada própria: ao rolar, só a opacidade anima (sem repintar a sombra) */
.site-header::after {
  content: "";
  position: absolute;
  inset: 0 0 calc(-1 * var(--border-hair));
  z-index: -1;
  border-bottom: var(--border-hair) solid var(--line-subtle);
  box-shadow: var(--shadow-header);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-standard) var(--ease-standard);
}
.site-header.is-scrolled::after { opacity: 1; }

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-3);
  min-height: var(--layout-header-height-mobile);
}
.brand { flex: none; display: inline-flex; align-items: center; min-height: var(--layout-tap-min); }
.brand img { width: 120px; height: auto; }
.nav { display: none; }
.header-cta { margin-left: auto; }
.lg-only { display: none; }
.menu-btn {
  min-height: var(--layout-tap-min);
  padding-inline: var(--space-3);
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: var(--fw-bold);
  cursor: pointer;
}

@media (max-width: 23.99rem) {
  .header-cta .sm-only { display: none; }
  .header-cta { padding-inline: var(--space-3); }
}

.nav-list { display: flex; flex-wrap: wrap; column-gap: var(--space-6); list-style: none; padding: 0; }
.nav-list a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--layout-tap-min);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}
.nav-list a::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--layout-trace-height);
  background: var(--accent-trace);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-quick) var(--ease-standard);
}
.nav-list a.is-active { color: var(--text-accent); }
.nav-list a.is-active::before { transform: none; }
@media (hover: hover) { .nav-list a:hover { text-decoration: underline; } }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  overflow-y: auto;
  padding-bottom: var(--space-8);
  background: var(--bg-page);
  opacity: 0;
  transform: translateY(calc(-1 * var(--space-2)));
  transition: opacity var(--dur-exit) var(--ease-exit), transform var(--dur-exit) var(--ease-exit);
}
.mobile-menu.is-open {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-standard) var(--ease-enter), transform var(--dur-standard) var(--ease-enter);
}
.mobile-menu-top { display: flex; align-items: center; justify-content: space-between; min-height: var(--layout-header-height-mobile); }
.mobile-list { list-style: none; padding: 0; margin: var(--space-5) 0 var(--space-6); }
.mobile-list a {
  display: block;
  padding-block: var(--space-3);
  border-bottom: var(--border-hair) solid var(--line-subtle);
  font-family: var(--font-display);
  font-size: var(--fs-h2-small-min);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  text-decoration: none;
}

/* ---------- seções ---------- */

.sec { padding-block: var(--space-section-mobile); }
.sec-voz {
  background: var(--bg-wall);
  padding-block: var(--space-section-voice-mobile) var(--space-section-mobile);
}
.sec-head { max-width: var(--measure-text); margin-bottom: var(--space-6); }
.sec-head .abertura { margin-top: var(--space-4); }

/* ---------- início (campo) ---------- */

.hero { overflow-x: clip; padding-bottom: var(--space-section-mobile); }
.hero-grid { display: grid; }
.hero-foto {
  order: -1;
  margin-inline: calc(-1 * var(--space-gutter));
}
.hero-foto img { width: 100%; }
.hero-foto .nota { padding: var(--space-2) var(--space-gutter) 0; }
.hero-head { min-width: 0; padding-top: var(--space-5); }
.hero-copy { min-width: 0; }
.hero-copy .lead { margin-top: var(--space-4); }
.hero-copy .btn { margin-top: var(--space-5); }
/* Rodada 3: palavras do H1 em blocos (a cascata do CLISP move cada uma); a sequência de campo fica por cima da foto, na mesma caixa */
.h1-p { display: inline-block; }
.hero-midia { position: relative; }
.hero-seq { position: absolute; inset: 0; z-index: 0; overflow: clip; pointer-events: none; }
.hero-seq picture { position: absolute; inset: 0; }
.hero-foto .hero-seq img { width: 100%; height: 100%; max-height: none; object-fit: cover; }
.seq-pausa { position: absolute; left: var(--space-3); bottom: var(--space-3); z-index: 1; gap: var(--space-2); background: var(--bg-board); }
.seq-pausa[hidden] { display: none; }

/* Composição 2: o número de prova sai da condensada e vai para um quadro de verdade (etiqueta + caneta) */
.hero-prova { min-width: 0; margin-top: var(--space-7); }
.quadro-prova { max-width: var(--layout-prova-width); }
.quadro-prova .etiqueta { margin: var(--space-4) var(--space-4) 0; }
.prova-num {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--space-3);
  padding: var(--space-2) var(--space-4) var(--space-3);
  border-bottom: var(--layout-tape) solid var(--board-tape);
}
.prova-num .antes .pen { font-size: var(--fs-pen-min); }
.prova-seta { width: var(--space-6); height: auto; flex: none; align-self: center; color: var(--text-secondary); }
.quadro-prova .quadro-nota { padding-bottom: var(--space-2); }
.quadro-prova .link-arrow { margin: 0 var(--space-4) var(--space-2); }

/* ---------- mercado (voz) ---------- */

.mercado-grid { display: grid; gap: var(--space-7); margin-top: var(--space-6); }
.mercado-grid > * { min-width: 0; }
.mercado-texto p + p { margin-top: var(--space-4); }
.mercado-nps h3 { margin-bottom: var(--space-2); }
.nps-intro { margin-bottom: var(--space-4); }

.nps { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.nps th, .nps td { padding: var(--space-3) 0; border-bottom: var(--border-hair) solid var(--line-strong); vertical-align: middle; }
.nps tbody th { text-align: left; font-weight: var(--fw-medium); overflow-wrap: anywhere; }
.nps td { text-align: right; font-weight: var(--fw-bold); }
.nps .is-pior th { font-weight: var(--fw-bold); }
.nps-menor { display: block; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--pen-start-on-wall); }
.nps-circulo {
  position: relative;
  display: inline-block;
  padding: var(--space-1) var(--space-4);
  color: var(--pen-start-on-wall);
}
.nps-circulo .circulo {
  position: absolute;
  inset: calc(-1 * var(--space-2)) calc(-1 * var(--space-1));
  width: calc(100% + 2 * var(--space-1));
  height: calc(100% + 2 * var(--space-2));
  max-width: none;
  pointer-events: none;
}
.nps + .nota { margin-top: var(--space-3); }
.artigo-link { margin-top: var(--space-4); }
.artigo-link + .nota { margin-top: 0; }

/* ---------- caneta ---------- */

.pen {
  font-family: var(--font-pen);
  font-weight: var(--fw-bold);
  font-size: clamp(var(--fs-pen-min), 1rem + 2.6vw, var(--fs-pen-max));
  line-height: var(--lh-pen);
  font-variant-numeric: normal;
}
.pen-done { color: var(--pen-done); }
/* número "antes" riscado pela caneta azul (o texto "antes" continua dizendo o que é) */
.riscado { position: relative; display: inline-block; }
.risco {
  position: absolute;
  left: 4%;
  top: 26%;
  width: 104%;
  height: 50%;
  max-width: none;
  color: var(--pen-done);
  overflow: visible;
  pointer-events: none;
}
.pen-start { color: var(--pen-start); }
.gl { display: inline-block; }
.depois { position: relative; --gst: var(--dur-glyph-stagger); }
.quadro-case .depois { --gst: var(--dur-glyph-stagger-row); }
.pen .gl:nth-child(2) { --gi: 1; }
.pen .gl:nth-child(3) { --gi: 2; }
.pen .gl:nth-child(4) { --gi: 3; }
.pen .gl:nth-child(5) { --gi: 4; }
.pen .gl:nth-child(6) { --gi: 5; }
.pen .gl:nth-child(7) { --gi: 6; }
.pen[data-gl="2"] ~ * { --gl-n: 2; }
.pen[data-gl="3"] ~ * { --gl-n: 3; }
.pen[data-gl="4"] ~ * { --gl-n: 4; }
.pen[data-gl="5"] ~ * { --gl-n: 5; }
.pen[data-gl="6"] ~ * { --gl-n: 6; }
.pen[data-gl="7"] ~ * { --gl-n: 7; }
.sublinhado {
  position: absolute;
  left: 0;
  bottom: calc(-1 * var(--space-1));
  width: 100%;
  height: var(--space-3);
  max-width: none;
  color: var(--pen-done);
  overflow: visible;
  pointer-events: none;
}
.nps .pen { font-size: var(--fs-pen-min); }

/* ---------- quadro de verdade (frentes e case) ---------- */

.quadro {
  background: var(--bg-board);
  border: var(--layout-frame) solid var(--board-frame);
  border-radius: var(--radius-frame);
  box-shadow: var(--shadow-board);
}

.etiqueta {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  background: var(--board-tag);
  border-bottom: calc(2 * var(--border-hair)) solid var(--board-tag-edge);
  color: var(--text-on-tag);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-tag);
  line-height: var(--lh-small);
  letter-spacing: var(--tr-tag);
  text-transform: uppercase;
}

.q-linha { min-width: 0; padding: var(--space-4); border-bottom: var(--layout-tape) solid var(--board-tape); }
.q-linha:last-child { border-bottom: 0; }
.q-celula { min-width: 0; margin-top: var(--space-3); }
.q-itens {
  display: flex;
  flex-wrap: wrap;
  row-gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin-left: calc(-1 * var(--space-3));
  overflow: hidden;
  font-size: var(--fs-sm);
  line-height: var(--lh-small);
}
.q-itens li { margin-left: calc(-1 * var(--layout-tape-thin)); padding-inline: var(--space-3); border-left: var(--layout-tape-thin) solid var(--board-tape-thin); }
.q-texto { font-size: var(--fs-sm); line-height: var(--lh-small); max-width: var(--measure-text); }
.quadro-legenda { margin-top: var(--space-3); }

.case-grid { display: grid; gap: var(--space-7); }
.case-grid > * { min-width: 0; }
.quadro-case { overflow-x: auto; }
.quadro-tabela { width: 100%; border-collapse: collapse; }
.quadro-tabela thead th { padding: var(--space-3) var(--space-4); text-align: left; border-bottom: var(--layout-tape) solid var(--board-tape); }
.quadro-tabela thead th:last-child { text-align: right; }
.quadro-tabela tbody th,
.quadro-tabela tbody td { padding: var(--space-3) var(--space-4); border-bottom: var(--layout-tape-thin) solid var(--board-tape-thin); vertical-align: middle; }
.quadro-tabela tbody tr:last-child > * { border-bottom: var(--layout-tape) solid var(--board-tape); }
.quadro-tabela tbody th { text-align: left; font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: var(--lh-small); }
.quadro-tabela td { text-align: right; }
.realizado { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; column-gap: var(--space-3); row-gap: var(--space-1); }
.antes { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--pen-start); line-height: var(--lh-small); }
.antes .pen { font-size: var(--fs-pen-min); }
.depois { white-space: nowrap; }
.pen-unit { font-weight: var(--fw-bold); color: var(--pen-done); }
.pen-note { flex-basis: 100%; font-size: var(--fs-sm); color: var(--text-secondary); line-height: var(--lh-small); }
.quadro-nota { padding: var(--space-3) var(--space-4) var(--space-4); font-size: var(--fs-sm); line-height: var(--lh-small); color: var(--text-secondary); }

.case-texto h3 { margin-bottom: var(--space-3); }
/* Rodada 3 (padrão do quadro AceleraISP do INB): as implantações ligadas à PMC. Grade 38 | 24 | 38 e 3 linhas iguais,
   casada com o SVG das linhas (viewBox 0–100). Estado final aqui; o movimento vem de movimento-b.css/js */
.mapa { position: relative; display: grid; grid-template-columns: 38% 24% 38%; grid-template-rows: repeat(3, minmax(var(--layout-mapa-linha-alvo), 1fr)); margin: var(--space-6) 0 0; }
.mapa-linhas { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mapa-linha, .mapa-fluxo { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.mapa-linha { stroke: var(--pen-done); stroke-width: 2; }
.mapa-fluxo { stroke: var(--accent-trace); stroke-width: 4; stroke-dasharray: 0.12 2; stroke-dashoffset: 0.12; opacity: 0; }
.mapa-nos { display: contents; list-style: none; }
.mapa-no { position: relative; display: flex; align-items: center; min-width: 0; padding-block: var(--space-2); }
.mapa-esq { grid-column: 1; justify-content: flex-end; text-align: right; }
.mapa-dir { grid-column: 3; justify-content: flex-start; }
.mapa-l1 { grid-row: 1; }
.mapa-l2 { grid-row: 2; }
.mapa-l3 { grid-row: 3; }
.mapa .etiqueta { white-space: normal; }
.mapa-centro { position: relative; grid-column: 2; grid-row: 1 / -1; align-self: center; justify-self: center; display: grid; place-items: center; width: min(var(--layout-mapa-centro), 100%); aspect-ratio: 1; border-radius: 50%; background: var(--bg-board); }
.mapa-anel { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mapa-anel circle { fill: none; }
.mapa-anel-int { stroke: var(--pen-done); stroke-width: 2.5; }
.mapa-anel-ext { stroke: var(--accent-trace); stroke-width: 1.5; stroke-dasharray: 2 3; }
.mapa-pmc { position: relative; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h3); line-height: 1; color: var(--text-primary); }
.implant-texto { list-style: none; padding: 0; margin-top: var(--space-6); border-top: var(--border-hair) solid var(--line-subtle); }
.implant-texto li { padding-block: var(--space-4); border-bottom: var(--border-hair) solid var(--line-subtle); }
.implant-texto h4 { font-size: var(--fs-base); line-height: var(--lh-small); }
.implant-texto p { margin-top: var(--space-1); font-size: var(--fs-sm); line-height: var(--lh-small); }

/* ---------- fita das frentes (rodada 2): cópia decorativa do quadro de #frentes, montada pelo script ---------- */

.fita {
  display: flex;
  align-items: center;
  background: var(--bg-board);
  border-block: var(--layout-tape) solid var(--board-tape);
}
.fita-janela {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--space-6), #000 calc(100% - var(--space-7)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 var(--space-6), #000 calc(100% - var(--space-7)), transparent);
  touch-action: pan-y;
}
.fita-janela, .fita-trilho, .fita-lista { height: var(--layout-fita-altura); }
.fita-trilho { display: flex; width: max-content; }
.fita-lista {
  display: flex;
  flex: none;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-small);
  white-space: nowrap;
}
.fita-frente { padding-inline: var(--space-6) var(--space-3); }
.fita-item { padding-inline: var(--space-4); border-left: var(--layout-tape-thin) solid var(--board-tape-thin); }
.fita-frente + .fita-item { border-left: 0; padding-left: var(--space-1); }
.fita-pausa { flex: none; gap: var(--space-2); margin-inline: var(--space-2) var(--space-gutter); }
.fita-pausa[hidden] { display: none; }
.fita-icone { width: var(--space-3); height: var(--space-3); border-inline: var(--space-1) solid currentColor; }
.mapa-pausa { gap: var(--space-2); margin-top: var(--space-3); }
.mapa-pausa[hidden] { display: none; }
.fita-pausa.is-parada .fita-icone, .seq-pausa.is-parada .fita-icone, .mapa-pausa.is-parada .fita-icone { border: 0; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }

/* ---------- mural de campanha ---------- */

.mural {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5) var(--space-4);
  margin-top: var(--space-8);
}
.mural-peca { min-width: 0; }
.mural-grande { grid-column: 1 / -1; }
.mural-midia { position: relative; }
/* hover: a peça sai do quadro; a sombra é camada própria (só opacidade anima) */
.mural-midia::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: var(--shadow-lift);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-quick) var(--ease-standard);
}
@media (hover: hover) and (pointer: fine) {
  .mural-peca:hover .mural-midia::after { opacity: 1; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .mural-midia { transition: transform var(--dur-quick) var(--ease-standard); }
  .mural-peca:hover .mural-midia { transform: translateY(calc(-1 * var(--space-1))); }
}
.mural-nav { display: none; }
.mural-nav-btn { width: var(--layout-tap-min); padding: 0; }
.seta-volta { transform: scaleX(-1); }
.mural-pos { font-size: var(--fs-sm); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.mural-peca img {
  width: 100%;
  outline: var(--border-hair) solid var(--line-image);
  outline-offset: calc(-1 * var(--border-hair));
}
.mural-peca figcaption { margin-top: var(--space-2); font-size: var(--fs-sm); line-height: var(--lh-small); }
.mural-sub { color: var(--text-secondary); }
.mural-nota { margin-top: var(--space-4); }
.case-btn { margin-top: var(--space-6); }

.facade-btn {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: var(--bg-inverse);
  color: inherit;
  cursor: pointer;
}
.facade-btn img { transition: opacity var(--dur-quick) var(--ease-standard); }
@media (hover: hover) { .facade-btn:hover img { opacity: 0.9; } }
.facade-play {
  position: absolute;
  left: var(--space-3);
  bottom: var(--space-3);
  display: inline-grid;
  place-items: center;
  width: var(--space-7);
  height: var(--layout-tap-min);
  background: var(--bg-inverse);
  color: var(--text-on-inverse);
  border-radius: var(--radius-control);
}
@media (hover: hover) { .facade-btn:hover .facade-play { background: var(--accent-solid); color: var(--text-on-accent); } }
.facade-play { transition: background-color var(--dur-quick) var(--ease-standard), color var(--dur-quick) var(--ease-standard), transform var(--dur-instant) var(--ease-standard); }
.facade-btn:active .facade-play { transform: scale(0.97); }
.facade iframe {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 0;
  background: var(--bg-inverse);
  transition: opacity var(--dur-quick) var(--ease-standard);
}
.mural-peca iframe { aspect-ratio: 16 / 9; }
.mural-grande iframe { aspect-ratio: 2 / 1; }
.facade.is-loading iframe { opacity: 0; }
.facade-ask { font-size: var(--fs-sm); line-height: var(--lh-small); }
.facade-ask:not(:empty) { margin-top: var(--space-2); }
.facade-note { font-size: var(--fs-sm); line-height: var(--lh-small); color: var(--text-secondary); }

/* ---------- serviços (voz) ---------- */

.servicos { list-style: none; padding: 0; margin-top: var(--space-6); border-top: var(--border-hair) solid var(--line-strong); }
.servico { display: grid; padding-block: var(--space-5); border-bottom: var(--border-hair) solid var(--line-strong); }
.servico > * { min-width: 0; }
.servico > p, .servico > div { margin-top: var(--space-2); }
.servico-principal .abertura { max-width: none; font-weight: var(--fw-semibold); }
.servico-principal p + p { margin-top: var(--space-3); }
.servico-principal .link-arrow { margin-top: var(--space-1); }

/* ---------- método (campo documental + momento orquestrado) ---------- */

.metodo-head { display: grid; gap: var(--space-4); margin-bottom: var(--space-7); }
.metodo-head > * { min-width: 0; }

.metodo-etapas {
  position: relative;
  display: grid;
  gap: var(--space-7);
  list-style: none;
  padding: 0 0 0 var(--space-6);
}
.metodo-etapas::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--layout-trace-height-mobile);
  background: var(--accent-trace);
  transform-origin: top;
}
.etapa { min-width: 0; }
.etapa-docs, .etapa-texto { min-width: 0; }
.etapa-texto { overflow-wrap: anywhere; }
.etapa-docs { position: relative; --atraso: 0ms; }
.documento {
  width: 100%;
  outline: var(--border-hair) solid var(--line-image);
  outline-offset: calc(-1 * var(--border-hair));
}
.doc-sobre { display: none; }
.etapa-b .documento { aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 25%; }
.etapa-texto { padding-top: var(--space-4); }
.etapa-num {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--fw-heavy);
  font-size: var(--fs-h2-min);
  line-height: var(--lh-display);
  color: var(--text-primary);
}
.etapa-texto h3 { margin-top: var(--space-2); }
.etapa-texto p { margin-top: var(--space-2); max-width: var(--measure-text); }
.etapa-texto .nota { margin-top: var(--space-2); }

/* ---------- equipe (faixa de campo) ---------- */

.sec-faixa { padding-bottom: var(--space-section-mobile); }
.faixa img { width: 100%; object-fit: cover; object-position: 61% 50%; }
.faixa-texto { padding-top: var(--space-5); }
.faixa-texto h2 { max-width: 30ch; }
.faixa-texto .nota { margin-top: var(--space-3); }

/* ---------- Mauro (voz) ---------- */

/* Composição 2: foto de campo larga no lugar do retrato de estúdio; texto curto */
.mauro-grid { display: grid; gap: var(--space-6); }
.mauro-grid > * { min-width: 0; }
.mauro-foto { margin-inline: calc(-1 * var(--space-gutter)); }
.mauro-foto img { width: 100%; }
.cargo { color: var(--text-secondary-on-wall); font-weight: var(--fw-semibold); }
.mauro-texto h3 { font-family: var(--font-display); font-size: var(--fs-h2-small-min); }
.mauro-texto p:last-child { margin-top: var(--space-4); max-width: var(--measure-lead); }

/* ---------- contato ---------- */

.contato { padding-top: var(--space-section-voice-mobile); }
.contato-grid { display: grid; gap: var(--space-7); margin-top: var(--space-6); }
.contato-grid > * { min-width: 0; }
.contato-copy .btn { margin-top: var(--space-5); }
.contato-num { margin-top: var(--space-1); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.contato-num a { display: inline-flex; align-items: center; min-height: var(--layout-tap-min); }
.h-pequeno { font-size: var(--fs-base); margin-bottom: var(--space-2); }

.contato-form {
  max-width: var(--layout-container-text);
  margin-top: var(--space-7);
  border-block: var(--border-hair) solid var(--line-strong);
}
.contato-form summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: calc(var(--layout-tap-min) + var(--space-4));
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-h3);
  list-style: none;
  cursor: pointer;
}
.contato-form summary::-webkit-details-marker { display: none; }
/* sinal de mais que vira menos */
.contato-form summary { position: relative; }
.contato-form summary::after {
  content: "";
  flex: none;
  width: var(--space-5);
  height: var(--space-5);
  background: linear-gradient(currentColor, currentColor) center / 100% var(--border-field) no-repeat;
}
/* barra vertical do mais: encolhe (scaleY) e o sinal vira menos */
.contato-form summary::before {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(var(--space-5) / 2 - var(--border-field) / 2);
  width: var(--border-field);
  height: var(--space-5);
  margin-top: calc(-1 * var(--space-5) / 2);
  background: currentColor;
  transition: transform var(--dur-quick) var(--ease-standard);
}
.contato-form[open] summary::before { transform: scaleY(0); }
.contato-form .form { padding-bottom: var(--space-6); }
.facade-map { margin-top: var(--space-4); }
.facade-map .facade-note { margin-top: var(--space-2); }

.form-intro { margin: 0 0 var(--space-5); color: var(--text-secondary); }
.field + .field { margin-top: var(--space-4); }
.field label { display: block; margin-bottom: var(--space-2); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.field input, .field textarea {
  display: block;
  width: 100%;
  min-height: calc(var(--layout-tap-min) + var(--space-1));
  padding: var(--space-3);
  background: var(--bg-board);
  border: var(--border-field) solid var(--line-field);
  border-radius: var(--radius-control);
  color: var(--text-primary);
  font: inherit;
  transition: border-color var(--dur-quick) var(--ease-standard);
}
.field textarea { resize: vertical; }
@media (hover: hover) { .field input:hover, .field textarea:hover { border-color: var(--text-secondary); } }
.field input:focus-visible, .field textarea:focus-visible { border-color: var(--focus-ring); outline-offset: 0; }
.field input::placeholder { color: var(--text-secondary); }
.field [aria-invalid="true"] { border-color: var(--text-error); }
.field-error { margin-top: var(--space-2); font-size: var(--fs-sm); color: var(--text-error); }
.form-legal { margin: var(--space-5) 0; font-size: var(--fs-sm); line-height: var(--lh-small); color: var(--text-secondary); }
.form-status { margin-top: var(--space-3); font-size: var(--fs-sm); }
.form-status:empty { margin: 0; }
.form-status.is-ok { color: var(--text-success); }
.form-status.is-error { color: var(--text-error); }

/* ---------- rodapé ---------- */

.site-footer {
  padding-block: var(--space-8) var(--space-6);
  background: var(--bg-inverse);
  color: var(--text-on-inverse);
  overflow-wrap: anywhere;
}
.site-footer :focus-visible { outline-color: var(--focus-ring-on-inverse); }
.footer-grid { display: grid; gap: var(--space-7); }
.footer-grid > * { min-width: 0; }
.footer-brand img { width: 150px; }
.footer-claim {
  margin-top: var(--space-5);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2-small-min);
  line-height: var(--lh-heading);
}
.footer-text { margin-top: var(--space-2); color: var(--text-on-inverse-muted); }
.footer-h {
  margin: var(--space-5) 0 var(--space-2);
  font-family: var(--font-base);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-body);
  color: var(--text-on-inverse-muted);
}
.footer-side .footer-h:first-child { margin-top: 0; }
.footer-list { display: flex; flex-direction: column; list-style: none; padding: 0; }
.footer-contato { margin-top: var(--space-5); }
.footer-list a, .footer-list .link-btn { display: inline-flex; align-items: center; min-height: var(--layout-tap-min); }
address.footer-list { color: var(--text-on-inverse-muted); line-height: var(--lh-small); gap: var(--space-1); }
.footer-base { margin-top: var(--space-7); font-size: var(--fs-sm); color: var(--text-on-inverse-muted); }
.footer-base p { padding-top: var(--space-5); border-top: var(--border-hair) solid var(--line-on-inverse); }

/* ---------- aviso de cookies e conteúdo externo ---------- */

.cookies {
  position: fixed;
  left: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: var(--z-cookies);
  max-height: calc(100dvh - 2 * var(--space-4));
  overflow-y: auto;
  padding: var(--space-4);
  background: var(--bg-board);
  border: var(--border-hair) solid var(--line-field);
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-panel);
  overflow-wrap: anywhere;
  transform: translateY(calc(100% + var(--space-6)));
  transition: transform var(--dur-exit) var(--ease-exit);
}
.cookies.is-in { transform: none; transition: transform var(--dur-standard) var(--ease-enter); }
.cookies-text { font-size: var(--fs-sm); line-height: var(--lh-small); }
.cookies-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 7rem), 1fr)); gap: var(--space-3); margin-top: var(--space-3); }
.cookies-actions .btn { padding-block: var(--space-2); }
/* menu do celular é modal: o aviso não fica por cima dele */
body.is-locked .cookies { visibility: hidden; }

/* ---------- páginas internas ---------- */

.doc { padding-block: var(--space-7) var(--space-9); }
.doc > * { max-width: var(--layout-container-text); }
.doc h1 { font-size: clamp(var(--fs-h2-min), 1rem + 3.4vw, var(--fs-h2-max)); line-height: var(--lh-heading); letter-spacing: var(--tr-h2); }
.doc-head .lead { margin-top: var(--space-4); }
.doc-head .note { margin-top: var(--space-4); }
.doc-body { margin-top: var(--space-7); }
.doc-body h2 {
  margin-top: var(--space-7);
  font-family: var(--font-base);
  font-size: var(--fs-h3);
  letter-spacing: var(--tr-h3);
}
.prose > * + * { margin-top: var(--space-4); }
.prose > h2 + * { margin-top: var(--space-3); }
.prose ul { padding-left: var(--space-5); }
.prose li + li { margin-top: var(--space-2); }
.nps-fig { margin-block: var(--space-6); }
.nps-fig .nota { margin-top: var(--space-3); }

.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); list-style: none; padding: 0; margin-bottom: var(--space-5); font-size: var(--fs-sm); color: var(--text-secondary); }
.crumbs li { display: inline-flex; align-items: center; }
.crumbs a { display: inline-flex; align-items: center; min-height: var(--layout-tap-min); }
.crumbs li + li::before { content: "/"; margin-right: var(--space-2); }

.doc-cta {
  margin-top: var(--space-8);
  padding: var(--space-6) var(--space-5);
  background: var(--bg-wall);
}
.doc-cta h2 { font-size: clamp(var(--fs-h2-small-min), 1rem + 1.6vw, var(--fs-h2-small-max)); }
.doc-cta p { margin-block: var(--space-3) var(--space-5); }

.notfound .lead { margin-top: var(--space-4); }
.notfound-links { list-style: none; padding: 0; margin: var(--space-6) 0; }
.notfound-links a { display: inline-flex; align-items: center; min-height: var(--layout-tap-min); }

/* ---------- celular: cortes de altura (conceito-b: mural e 2ª frase saem primeiro) ---------- */

@media (max-width: 47.99rem) {
  .so-desk { display: none; }
  .etapa-texto .nota { display: none; }
  /* Rodada 2: mural em carrossel nativo (encaixe, sem rolagem automática); as 5 peças voltam */
  .mural {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    margin: var(--space-7) calc(-1 * var(--space-gutter)) 0;
    padding: 0 var(--space-gutter) var(--space-2);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--space-gutter);
    scrollbar-width: none;
  }
  .mural::-webkit-scrollbar { display: none; }
  .mural-peca { flex: none; width: max-content; max-width: var(--layout-mural-peca-celular); scroll-snap-align: start; }
  .mural-peca figcaption, .mural-peca .facade-ask { width: 0; min-width: 100%; }
  .mural-peca img { width: auto; max-width: 100%; height: var(--layout-mural-altura-celular); object-fit: cover; }
  .mural-nav:not([hidden]) { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-3); }
  .doc-base { aspect-ratio: 2 / 1; object-fit: cover; }
  .etapa-b .documento { aspect-ratio: 2 / 1; object-position: 50% 20%; }
  .etapa-d .doc-base { aspect-ratio: auto 1266 / 515; }
  .etapa-num { float: left; margin-right: var(--space-3); }
  .etapa-texto h3 { margin-top: 0; }
  .etapa-texto p { clear: both; }
  .nps th, .nps td { padding-block: var(--space-2); }
  .nps-intro, .artigo-link + .nota, .hero-foto .nota, .implant-texto { display: none; }
  .contato-grid { gap: var(--space-7); }
  .footer-contato, .footer-side .footer-list:last-child { flex-direction: row; flex-wrap: wrap; column-gap: var(--space-5); }
  .metodo-etapas { gap: var(--space-6); }
  .q-linha { padding: var(--space-3); }
  .q-celula { margin-top: var(--space-2); }
  .q-itens { row-gap: var(--space-1); }
  .quadro-tabela tbody th, .quadro-tabela tbody td { padding: var(--space-2) var(--space-3); }
  .quadro-tabela thead th { padding-inline: var(--space-3); }
  .quadro-tabela .pen { font-size: var(--fs-h2-small-min); }
  .site-footer { padding-top: var(--space-7); }
  .footer-grid { gap: var(--space-6); }
}

/* C3: a foto da dobra não empurra o H1 e o CTA para fora da 1ª tela em telas baixas */
@media (max-width: 63.99rem) {
  .hero-foto img {
    max-height: min(var(--layout-hero-photo-mobile), var(--layout-hero-photo-max-vh));
    object-fit: cover;
    object-position: 30% 50%;
  }
}

/* Interface 2: com texto 200% num celular, o realizado desce para baixo do indicador */
@media (max-width: 19.99rem) {
  .quadro-tabela thead tr { display: flex; flex-wrap: wrap; justify-content: space-between; }
  .quadro-tabela tbody tr { display: grid; }
  .quadro-tabela tbody th, .quadro-tabela tbody td { display: block; }
  .quadro-tabela tbody th { padding-bottom: 0; border-bottom: 0; }
  .quadro-tabela tbody tr:last-child > th { border-bottom: 0; }
  .depois { white-space: normal; }
}

/* ---------- tablet ---------- */

@media (min-width: 48rem) {
  .container { padding-inline: var(--space-gutter-desktop); max-width: calc(var(--layout-container) + 2 * var(--space-gutter-desktop)); }
  .hero-foto { margin-inline: calc(-1 * var(--space-gutter-desktop)); }
  .hero-foto .nota { padding-inline: var(--space-gutter-desktop); }
  .faixa img { height: min(var(--layout-faixa-height), max(var(--layout-faixa-height-min), 29vw)); }
  .mauro-foto { margin-inline: calc(-1 * var(--space-gutter-desktop)); }
  /* V3: peças na proporção de origem, larguras diferentes, base comum */
  .mural { grid-template-columns: repeat(12, 1fr); gap: var(--space-6) var(--space-5); align-items: end; }
  .mural-grande { grid-column: span 7; }
  .mural-mesh { grid-column: span 5; }
  .mural-media { grid-column: span 4; }
  .mural-quadrada { grid-column: span 3; }
  .q-linha { display: grid; grid-template-columns: 13rem 1fr; padding: 0; }
  .q-linha .etiqueta { align-self: start; margin: var(--space-4); justify-self: start; }
  .q-celula { margin: 0; padding: var(--space-4); border-left: var(--layout-tape) solid var(--board-tape); }
  .q-itens, .q-texto { font-size: var(--fs-base); }

  /* método: documento sobreposto a partir do tablet (as legendas citam mapa e reunião) */
  .etapa-a .etapa-docs { padding-top: var(--space-8); }
  .etapa-a .doc-base { width: 84%; }
  .doc-sobre {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 56%;
    border: var(--space-1) solid var(--bg-page);
  }
  /* V6: o quadro real é o desfecho; a reunião fica no canto de baixo, sobre a grade vazia */
  .etapa-d .etapa-docs { padding-bottom: var(--space-7); }
  .etapa-d .doc-sobre { top: auto; right: auto; bottom: 0; left: 0; width: 38%; }
  .footer-grid { grid-template-columns: 1.4fr 1fr; gap: var(--space-8); }
  .doc-cta { padding: var(--space-7) var(--space-6); }
}

/* V7: no tablet o método vai a 2 colunas, com o traço na calha */
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .metodo-etapas { grid-template-columns: 1fr 1fr; gap: var(--space-7) var(--space-8); padding-left: 0; }
  .metodo-etapas::before { left: calc(50% - var(--layout-trace-height-mobile) / 2); }
}

/* ---------- desktop ---------- */

@media (min-width: 64rem) {
  html { scroll-padding-top: calc(var(--layout-header-height) + var(--space-4)); }
  .header-inner { min-height: var(--layout-header-height); gap: var(--space-2) var(--space-6); flex-wrap: wrap; }
  .nav { display: block; margin-left: auto; }
  .header-cta { margin-left: 0; }
  .menu-btn { display: none; }
  .lg-only { display: inline; }
  .sm-only { display: none; }

  .sec { padding-block: var(--space-section); }
  .sec-voz { padding-block: var(--space-section-voice) var(--space-section); }

  /* Composição 2: H1 em cima, abertura + botão numa linha, foto de campo de borda a borda,
     quadro de prova pendurado sobre a borda de cima da foto */
  .hero { padding-bottom: var(--space-section); }
  .hero-grid { grid-template-columns: repeat(12, 1fr); column-gap: var(--space-gutter-desktop); align-items: start; }
  .hero-head { grid-column: 1 / -1; grid-row: 1; padding-top: var(--space-7); }
  .hero-copy { grid-column: 1 / 9; grid-row: 2; display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-5) var(--space-6); padding-top: var(--space-5); }
  .hero-copy .lead, .hero-copy .btn { margin-top: 0; }
  .hero-prova { grid-column: 9 / -1; grid-row: 2 / 4; z-index: 1; justify-self: end; width: 100%; max-width: var(--layout-prova-width); margin-top: var(--space-5); }
  .hero-foto { order: 0; grid-column: 1 / -1; grid-row: 3; margin: var(--space-6) calc(50% - 50vw) 0; }
  .hero-foto img {
    height: clamp(var(--layout-hero-photo-desktop-min), var(--layout-hero-photo-desktop-vh), var(--layout-hero-photo-desktop-max));
    object-fit: cover;
    object-position: 28% 42%;
  }
  .hero-foto .nota { padding: var(--space-2) max(var(--space-gutter-desktop), calc(50vw - var(--layout-container) / 2)) 0; }
  .seq-pausa { left: max(var(--space-gutter-desktop), calc(50vw - var(--layout-container) / 2)); bottom: var(--space-4); }

  .mercado-grid { grid-template-columns: repeat(12, 1fr); column-gap: var(--space-gutter-desktop); margin-top: var(--space-7); align-items: start; }
  .mercado-texto, .case-texto { position: sticky; top: calc(var(--layout-header-height) + var(--space-5)); }
  .mercado-texto { grid-column: 1 / 7; }
  .mercado-nps { grid-column: 8 / -1; }

  .servicos { margin-top: var(--space-8); }
  .servico { grid-template-columns: repeat(12, 1fr); column-gap: var(--space-gutter-desktop); }
  .servico h3 { grid-column: 1 / 5; }
  .servico > p, .servico > div { grid-column: 5 / -1; margin-top: 0; }

  .metodo-head { grid-template-columns: repeat(12, 1fr); column-gap: var(--space-gutter-desktop); align-items: end; }
  .metodo-head h2 { grid-column: 1 / 8; }
  .metodo-head .abertura { grid-column: 8 / -1; }

  .metodo-etapas {
    grid-template-columns: 2.6fr 2fr 3.4fr 4fr;
    grid-template-rows: auto var(--layout-trace-height) auto;
    gap: 0 var(--space-gutter-desktop);
    padding: 0;
  }
  .metodo-etapas::before {
    position: static;
    grid-row: 2;
    grid-column: 1 / -1;
    width: auto;
    transform-origin: left;
  }
  .etapa { grid-row: 1 / 4; display: grid; grid-template-rows: subgrid; }
  .etapa-a { grid-column: 1; }
  .etapa-b { grid-column: 2; }
  .etapa-c { grid-column: 3; }
  .etapa-d { grid-column: 4; }
  .etapa-docs { grid-row: 1; align-self: end; }
  .etapa-texto { grid-row: 3; padding-top: var(--space-5); }
  .etapa-b .documento { aspect-ratio: auto 506 / 675; }

  .case-grid { grid-template-columns: repeat(12, 1fr); column-gap: var(--space-gutter-desktop); align-items: start; }
  .quadro-case { grid-column: 1 / 8; }
  .case-texto { grid-column: 8 / -1; }
  .quadro-tabela tbody th { font-size: var(--fs-base); }
  .quadro-tabela tbody th, .quadro-tabela tbody td { padding-block: var(--space-2); }

  .sec-faixa { padding-bottom: var(--space-section); }
  .faixa-texto { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--space-gutter-desktop); align-items: end; padding-top: var(--space-6); }
  .faixa-texto h2 { grid-column: 1 / 9; max-width: none; }
  .faixa-texto .nota { grid-column: 9 / -1; margin-top: 0; }
  .mural { column-gap: var(--space-gutter-desktop); }

  /* Composição 2: missão deslocada para a coluna 4 (sai do canto esquerdo); foto sangra à esquerda */
  .mauro-grid { grid-template-columns: repeat(12, 1fr); column-gap: var(--space-gutter-desktop); row-gap: var(--space-7); }
  .mauro-grid .voz { grid-column: 4 / -1; grid-row: 1; }
  .mauro-foto { grid-column: 1 / 8; grid-row: 2; margin: 0 0 0 calc(-1 * max(var(--space-gutter-desktop), (100vw - var(--layout-container)) / 2)); }
  .mauro-texto { grid-column: 9 / -1; grid-row: 2; align-self: end; }

  .contato { padding-top: var(--space-section-voice); }
  .contato-grid { grid-template-columns: repeat(12, 1fr); column-gap: var(--space-gutter-desktop); margin-top: var(--space-7); }
  .contato-copy { grid-column: 1 / 7; }
  .contato-bloco { grid-column: 8 / -1; }

  .cookies { left: auto; right: var(--space-6); bottom: var(--space-6); max-width: var(--layout-panel); padding: var(--space-5); }
}

/* ---------- o quadro se escreve ---------- */
/* Traços SVG por stroke-dashoffset (pathLength 1); número algarismo a algarismo (clip-path); fill backwards */

@keyframes revelar {
  from { clip-path: inset(-25% 110% -25% -10%); }
  to { clip-path: inset(-25% -10% -25% -10%); }
}
@keyframes tracar {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}
@keyframes puxar-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* Rodada 3 (CLISP): assenta de --sobe até o lugar. Sem máscara e sem opacidade: visível desde o 1º quadro */
@keyframes assentar { from { transform: translateY(var(--sobe, var(--layout-hero-rise))); } to { transform: none; } }

@media screen and (prefers-reduced-motion: no-preference) {
  .hero-head .trace { transform-origin: left; animation: puxar-x var(--dur-trace-h1) var(--ease-trace) backwards; }
  /* Rodada 3: cascata do hero do CLISP. Palavras a cada 120 ms, abertura em 350 ms, botão em 500 ms; fim em 1,22 s */
  .hero h1 .h1-p { animation: assentar var(--dur-hero-line) var(--ease-reveal) backwards; }
  .hero h1 .h1-p:nth-child(2) { animation-delay: var(--dur-hero-line-stagger); }
  .hero h1 .h1-p:nth-child(3) { animation-delay: calc(2 * var(--dur-hero-line-stagger)); }
  .hero h1 .h1-p:nth-child(4) { animation-delay: calc(3 * var(--dur-hero-line-stagger)); }
  .hero-copy .lead { --sobe: var(--layout-hero-copy-rise); animation: assentar var(--dur-hero-line) var(--ease-reveal) var(--dur-hero-copy-delay) backwards; }
  /* No celular o botão fica parado: a 390 × 664 ele termina a 8 px da borda e não pode nascer fora da 1ª tela */
  @media (min-width: 64rem) {
    .hero-copy .btn { --sobe: var(--layout-hero-copy-rise); animation: assentar var(--dur-hero-line) var(--ease-reveal) var(--dur-hero-cta-delay) backwards; }
  }

  /* Prova da dobra no desktop: CSS na carga, sem JS. H1 e foto não animam (LCP) */
  @media (min-width: 64rem) {
    .quadro-prova {
      --t-risco: calc(var(--dur-hero-delay) + var(--dur-tape));
      --t-seta: calc(var(--t-risco) + var(--dur-pen-strike));
      --atraso: calc(var(--t-seta) + var(--dur-quick));
    }
    .quadro-prova .etiqueta { animation: revelar var(--dur-tape) var(--ease-enter) var(--dur-hero-delay) backwards; }
    .quadro-prova .risco path { stroke-dasharray: 1 1; animation: tracar var(--dur-pen-strike) var(--ease-pen) var(--t-risco) backwards; }
    .quadro-prova .prova-seta path { stroke-dasharray: 1 1; animation: tracar var(--dur-quick) var(--ease-pen) var(--t-seta) backwards; }
    .quadro-prova .depois .gl { animation: revelar var(--dur-glyph) var(--ease-pen) calc(var(--atraso) + var(--gi, 0) * var(--gst)) backwards; }
    .quadro-prova .depois .pen-unit { animation: revelar var(--dur-quick) var(--ease-pen) calc(var(--atraso) + (var(--gl-n, 1) - 1) * var(--gst) + var(--dur-glyph)) backwards; }
    .quadro-prova .sublinhado path { stroke-dasharray: 1 1; animation: tracar var(--dur-underline) var(--ease-pen) calc(var(--atraso) + (var(--gl-n, 1) - 1) * var(--gst) + var(--dur-glyph)) backwards; }
  }
}

/* Método fixado: o palco para e a rolagem puxa o traço e os documentos. Layout em CSS puro (âncoras e CLS estáveis) */
@media screen and (min-width: 64rem) and (min-height: 50rem) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .metodo-pista {
      height: calc(100svh - var(--layout-header-height) + var(--layout-metodo-pin));
      view-timeline: --pista block;
      view-timeline-inset: var(--layout-header-height) 0;
    }
    .metodo-palco {
      position: sticky;
      top: var(--layout-header-height);
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: calc(100svh - var(--layout-header-height));
    }
  }
}

@media print {
  .fita, .hero-seq, .seq-pausa, .mapa-pausa { display: none; }
}

/* ---------- movimento reduzido ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; }
  .btn:active { transform: none; }
  .nav-list a::before { transition: none; }
  .link-arrow:hover svg { transform: none; }
  .mobile-menu, .mobile-menu.is-open { transform: none; }
  .cookies, .cookies.is-in { transform: none; }
  .facade-btn:active .facade-play { transform: none; }
  .contato-form summary::before { transition: none; }
}