/* ============================================================
     P1 — NORTH-STAR / CONCEITO C: SISTEMA VIVO
     Paleta exclusiva:
       preto quente  #161514   (fundo)
       dourado       #EAAC1F   (pulso do sistema + CTA primário)
       off-white     #F7F0EA   (texto primário)
     Derivados:      #1C1B19 · #A89F94 · #F2BC3D · hairline rgba(247,240,234,.08)
     ============================================================ */

  :root {
    --preto:    #161514;
    --preto-2:  #1C1B19;
    --ouro:     #EAAC1F;
    --ouro-hov: #F2BC3D;
    --ouro-esc: #9A7314;
    --off:      #F7F0EA;
    --sec:      #A89F94;
    --hairline: rgba(247,240,234,0.08);
    --hairline-2: rgba(247,240,234,0.16);
    --pad-x: 64px;
    --peek: 88px;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  html { scroll-behavior: smooth; }

  body {
    background: var(--preto);
    color: var(--off);
    font-family: 'Outfit', sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  .mono {
    font-family: 'JetBrains Mono', monospace;
    text-transform: uppercase;
  }

  /* ---------- HERO (inclui navbar) ---------- */

  .hero {
    position: relative;
    overflow: hidden;
    min-height: calc(100vh - var(--peek));
    min-height: calc(100svh - var(--peek));
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--hairline);
  }

  .hero > .nav,
  .hero > .hero-inner,
  .hero > .hero-meta { position: relative; z-index: 1; }

  /* ---------- NAVBAR ---------- */

  .nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px var(--pad-x);
    border-bottom: 1px solid var(--hairline);
  }

  .nav-logo {
    font-weight: 800;
    font-size: 1.4rem;
    letter-spacing: 0.01em;
    color: var(--off);
    text-decoration: none;
    line-height: 1;
    display: flex;
    align-items: baseline;
    gap: 7px;
  }

  .nav-logo i {
    font-style: normal;
    width: 5px;
    height: 5px;
    background: var(--ouro);
    display: inline-block;
  }

  .nav-logo img {
    height: 21px;
    width: auto;
    display: block;
  }

  .nav-links {
    display: flex;
    gap: 36px;
    list-style: none;
  }

  .nav-links a {
    color: var(--sec);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    transition: color 0.18s ease;
  }

  .nav-links a:hover { color: var(--off); }

  .nav-cta {
    font-family: 'JetBrains Mono', monospace;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    color: var(--off);
    text-decoration: none;
    border: 1px solid var(--hairline-2);
    padding: 11px 20px;
    transition: border-color 0.18s ease, color 0.18s ease;
    white-space: nowrap;
  }

  .nav-cta:hover {
    border-color: var(--ouro);
    color: var(--ouro-hov);
  }

  /* ---------- CORPO DO HERO ---------- */

  .hero-inner {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
    align-items: center;
    gap: clamp(40px, 5vw, 88px);
    padding: clamp(40px, 5vh, 64px) var(--pad-x);
    max-width: 1560px;
    width: 100%;
    margin: 0 auto;
  }

  /* --- coluna de copy --- */

  .eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    color: var(--sec);
    margin-bottom: 30px;
  }

  .eyebrow::before {
    content: "";
    width: 6px;
    height: 6px;
    background: var(--ouro);
    flex: none;
  }

  h1 {
    font-size: clamp(2.7rem, 5.6vw, 5rem);
    line-height: 1.02;
    letter-spacing: -0.015em;
    margin-bottom: 28px;
  }

  h1 .thin {
    display: block;
    font-weight: 100;
    color: var(--off);
  }

  h1 .bold {
    display: block;
    font-weight: 800;
  }

  .sub {
    font-size: 1.06rem;
    font-weight: 300;
    line-height: 1.65;
    color: var(--sec);
    max-width: 50ch;
    margin-bottom: 44px;
  }

  .cta-row {
    display: flex;
    align-items: center;
    gap: 36px;
    flex-wrap: wrap;
  }

  .btn-primary {
    background: var(--ouro);
    color: var(--preto);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.98rem;
    letter-spacing: 0.01em;
    padding: 17px 34px;
    transition: background 0.18s ease;
  }

  .btn-primary:hover { background: var(--ouro-hov); }

  .btn-ghost {
    color: var(--off);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.98rem;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--hairline-2);
    transition: color 0.18s ease, border-color 0.18s ease;
  }

  .btn-ghost::after { content: " \2192"; }

  .btn-ghost:hover {
    color: var(--ouro-hov);
    border-color: var(--ouro);
  }

  /* --- coluna do diagrama --- */

  .diagram {
    position: relative;
    width: 100%;
    max-width: 580px;
    justify-self: end;
    padding: 22px 26px 18px;
  }

  /* cantoneiras de desenho técnico */
  .diagram::before,
  .diagram::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
  }

  .diagram::before {
    top: 0; left: 0;
    border-top: 1px solid var(--hairline-2);
    border-left: 1px solid var(--hairline-2);
  }

  .diagram::after {
    bottom: 0; right: 0;
    border-bottom: 1px solid var(--hairline-2);
    border-right: 1px solid var(--hairline-2);
  }

  .diagram svg {
    display: block;
    width: 100%;
    height: auto;
  }

  .fig-caption {
    margin-top: 10px;
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    color: var(--sec);
    text-align: center;
  }

  /* ---------- RODAPÉ DO HERO ---------- */

  .hero-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 16px var(--pad-x);
    border-top: 1px solid var(--hairline);
    font-size: 0.62rem;
    letter-spacing: 0.2em;
    color: var(--sec);
  }

  /* ---------- SEÇÃO 01 — DOR (livro-razão) ---------- */

  .dor {
    background: var(--off);
    color: var(--preto);
    padding: clamp(72px, 8vh, 112px) var(--pad-x) clamp(100px, 12vh, 148px);
    position: relative;
    overflow: hidden;
  }

  .dor-inner {
    max-width: 1560px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }

  /* detalhe de fundo das placas claras — hachura de engenharia (hairline
     diagonal confinada a um canto, máscara de fade; não captura clique) */
  .hachura {
    position: absolute;
    width: 48%; height: 52%;
    max-width: 640px;
    pointer-events: none; z-index: 0;
  }

  .hachura--bl {
    left: 0; bottom: 0;
    background-image: repeating-linear-gradient(135deg, rgba(22,21,20,0.11) 0 1px, transparent 1px 13px);
    -webkit-mask-image: linear-gradient(to top right, #000000, transparent 76%);
    mask-image: linear-gradient(to top right, #000000, transparent 76%);
  }

  .hachura--br {
    right: 0; bottom: 0;
    background-image: repeating-linear-gradient(45deg, rgba(22,21,20,0.11) 0 1px, transparent 1px 13px);
    -webkit-mask-image: linear-gradient(to top left, #000000, transparent 76%);
    mask-image: linear-gradient(to top left, #000000, transparent 76%);
  }

  .hachura--tl {
    left: 0; top: 0;
    background-image: repeating-linear-gradient(45deg, rgba(22,21,20,0.11) 0 1px, transparent 1px 13px);
    -webkit-mask-image: linear-gradient(to bottom right, #000000, transparent 76%);
    mask-image: linear-gradient(to bottom right, #000000, transparent 76%);
  }

  /* régua de cota — ancora a hachura: as listras passam a ser o
     preenchimento de uma prancha medida, não textura solta. Linha-base
     + ticks finos no mesmo cinza das listras, some saindo do canto. */
  .regua {
    position: absolute;
    bottom: 28px;
    width: 34%;
    max-width: 420px;
    height: 9px;
    pointer-events: none;
    z-index: 0;
    background-repeat: no-repeat, no-repeat;
    background-image:
      linear-gradient(to bottom, rgba(22,21,20,0.16) 0 1px, transparent 1px),
      repeating-linear-gradient(to right, rgba(22,21,20,0.16) 0 1px, transparent 1px 17px);
  }

  .regua--bl {
    left: var(--pad-x);
    -webkit-mask-image: linear-gradient(to right, #000000, transparent);
    mask-image: linear-gradient(to right, #000000, transparent);
  }

  .regua--br {
    right: var(--pad-x);
    -webkit-mask-image: linear-gradient(to left, #000000, transparent);
    mask-image: linear-gradient(to left, #000000, transparent);
  }

  .sec-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    color: var(--preto);
  }

  .sec-eyebrow::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(22,21,20,0.14);
  }

  /* arquitetura em 2 colunas — mesma gramática do hero:
     copy à esquerda, prancha (FIG. 02) à direita */
  .dor-grid {
    margin-top: 64px;
    display: grid;
    grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.04fr);
    gap: clamp(40px, 5vw, 96px);
    align-items: start;
  }

  .dor h2 {
    font-size: clamp(2.2rem, 3.4vw, 3.2rem);
    line-height: 1.05;
    letter-spacing: -0.015em;
  }

  .dor h2 .thin {
    display: block;
    font-weight: 100;
  }

  .dor h2 .bold {
    display: block;
    font-weight: 800;
  }

  .dor-abertura {
    margin-top: 26px;
    font-size: 1.04rem;
    font-weight: 300;
    line-height: 1.65;
    color: rgba(22,21,20,0.72);
    max-width: 52ch;
  }

  /* virada: fecha a coluna de copy, acento ouro */
  .virada {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid rgba(22,21,20,0.14);
    font-size: clamp(1.3rem, 1.9vw, 1.7rem);
    font-weight: 300;
    line-height: 1.4;
    letter-spacing: -0.01em;
    max-width: 36ch;
  }

  .virada b { font-weight: 700; }

  .virada i {
    font-style: normal;
    display: inline-block;
    width: 0.34em;
    height: 0.34em;
    background: var(--ouro);
    margin-left: 0.28em;
  }

  /* ---------- FIG. 02 — prancha de leitura dos sinais ---------- */

  .fig02 {
    position: relative;
    padding: 20px 26px 18px;
  }

  /* cantoneiras — mesmo dispositivo do diagrama do hero */
  .fig02::before,
  .fig02::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
  }

  .fig02::before {
    top: 0; left: 0;
    border-top: 1px solid rgba(22,21,20,0.3);
    border-left: 1px solid rgba(22,21,20,0.3);
  }

  .fig02::after {
    bottom: 0; right: 0;
    border-bottom: 1px solid rgba(22,21,20,0.3);
    border-right: 1px solid rgba(22,21,20,0.3);
  }

  /* régua de ticks na borda direita — detalhe estático de instrumento */
  .fig02-regua {
    position: absolute;
    top: 64px;
    bottom: 64px;
    right: 0;
    width: 7px;
    background-image: repeating-linear-gradient(
      to bottom,
      rgba(22,21,20,0.28) 0, rgba(22,21,20,0.28) 1px,
      transparent 1px, transparent 13px);
  }

  .leitura {
    position: relative;
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 6px 24px;
    padding: 22px 0;
    border-bottom: 1px solid rgba(22,21,20,0.12);
  }

  /* feixe de leitura: trecho aceso percorrendo a hairline inferior
     da linha ativa — cabeçote do scanner (rastro fade → núcleo) */
  .leitura .feixe {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 130px;
    height: 2px;
    background: linear-gradient(90deg, rgba(234,172,31,0) 0%, #EAAC1F 86%);
    box-shadow: 0 0 5px rgba(234,172,31,0.8);
    opacity: 0;
  }

  @keyframes feixe-scan {
    0%      { left: 0; opacity: 0; }
    2%      { opacity: 1; }
    20%     { opacity: 1; }
    24%     { left: calc(100% - 130px); opacity: 0; }
    100%    { left: calc(100% - 130px); opacity: 0; }
  }

  .leitura:nth-of-type(1) .feixe { animation: feixe-scan 16s linear infinite; }
  .leitura:nth-of-type(2) .feixe { animation: feixe-scan 16s linear infinite 4s; }
  .leitura:nth-of-type(3) .feixe { animation: feixe-scan 16s linear infinite 8s; }
  .leitura:nth-of-type(4) .feixe { animation: feixe-scan 16s linear infinite 12s; }

  /* índice acende junto com o LED */
  @keyframes idx-scan {
    0%, 4%   { color: rgba(22,21,20,0.55); text-shadow: 0 0 5px rgba(234,172,31,0); }
    7%, 22%  { color: var(--ouro); text-shadow: 0 0 5px rgba(234,172,31,0.4); }
    27%, 100% { color: rgba(22,21,20,0.55); text-shadow: 0 0 5px rgba(234,172,31,0); }
  }

  .leitura:nth-of-type(1) .leitura-idx { animation: idx-scan 16s linear infinite; }
  .leitura:nth-of-type(2) .leitura-idx { animation: idx-scan 16s linear infinite 4s; }
  .leitura:nth-of-type(3) .leitura-idx { animation: idx-scan 16s linear infinite 8s; }
  .leitura:nth-of-type(4) .leitura-idx { animation: idx-scan 16s linear infinite 12s; }

  /* índice mono com indicador ouro — acende na varredura */
  .leitura-idx {
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    color: rgba(22,21,20,0.55);
    display: flex;
    align-items: center;
    gap: 9px;
    line-height: 1;
    padding-top: 5px;
  }

  .leitura-led {
    position: relative;
    width: 7px;
    height: 7px;
    background: rgba(22,21,20,0.18);
    flex: none;
  }

  /* núcleo aceso + halo apertado (luz com fonte física, blur 5px) */
  .leitura-led::before,
  .leitura-led::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--ouro);
    opacity: 0;
  }

  .leitura-led::after {
    filter: blur(5px);
    transform: scale(1.3);
  }

  .leitura h3 {
    font-size: 1.18rem;
    font-weight: 800;
    letter-spacing: -0.012em;
    line-height: 1.2;
  }

  .leitura p {
    grid-column: 2;
    font-size: 0.95rem;
    font-weight: 300;
    line-height: 1.58;
    color: rgba(22,21,20,0.66);
    max-width: 50ch;
  }

  /* varredura: cada LED acende no seu quarto do ciclo de 12s */
  @keyframes led-scan {
    0%, 4% { opacity: 0; }
    7%, 22% { opacity: 1; }
    27%, 100% { opacity: 0; }
  }

  .leitura:nth-of-type(1) .leitura-led::before,
  .leitura:nth-of-type(1) .leitura-led::after { animation: led-scan 16s linear infinite; }
  .leitura:nth-of-type(2) .leitura-led::before,
  .leitura:nth-of-type(2) .leitura-led::after { animation: led-scan 16s linear infinite 4s; }
  .leitura:nth-of-type(3) .leitura-led::before,
  .leitura:nth-of-type(3) .leitura-led::after { animation: led-scan 16s linear infinite 8s; }
  .leitura:nth-of-type(4) .leitura-led::before,
  .leitura:nth-of-type(4) .leitura-led::after { animation: led-scan 16s linear infinite 12s; }

  .leitura-led::after { opacity: 0; }

  /* status da prancha — espelho do "ETAPA 0X/04 ATIVA" do hero */
  .fig02-status {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding-top: 14px;
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    color: rgba(22,21,20,0.55);
  }

  .fig02-status .frames {
    position: relative;
    display: inline-block;
  }

  .fig02-status .frames span {
    opacity: 0;
    animation: status-scan 16s steps(1) infinite;
  }

  .fig02-status .frames span:nth-child(1) { position: relative; animation-delay: 0s; }
  .fig02-status .frames span:nth-child(2) { position: absolute; left: 0; animation-delay: 4s; }
  .fig02-status .frames span:nth-child(3) { position: absolute; left: 0; animation-delay: 8s; }
  .fig02-status .frames span:nth-child(4) { position: absolute; left: 0; animation-delay: 12s; }

  @keyframes status-scan {
    0% { opacity: 1; }
    25%, 100% { opacity: 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .leitura .leitura-led::before,
    .leitura .leitura-led::after,
    .leitura .feixe,
    .leitura .leitura-idx,
    .fig02-status .frames span {
      animation: none;
    }
    /* congela num estado bonito: sinal 01 aceso */
    .leitura:nth-of-type(1) .leitura-led::before { opacity: 1; }
    .leitura:nth-of-type(1) .leitura-led::after { opacity: 1; }
    .leitura:nth-of-type(1) .leitura-idx { color: var(--ouro); }
    .fig02-status .frames span:nth-child(1) { opacity: 1; }

    /* FIG. 05: congela com a unidade 01 em leitura (o SVG congela via JS) */
    .u-led,
    .u-idx,
    .fig05-frames span {
      animation: none;
    }
    .ficha:nth-of-type(1) .u-led { opacity: 1; }
    .ficha:nth-of-type(1) .u-idx { color: var(--ouro); }
    .fig05-frames span:nth-child(1) { opacity: 1; }

    /* pin de scroll é dirigido pelo usuário — só remove o crossfade */
    .mov { transition: none; }
  }

  /* ---------- SEÇÃO 02 — O MOTOR P1 (pin de scroll) ----------
     O scroll não desce a página: troca o movimento ativo
     (Diagnóstico → Estratégia → Execução → Escala) e estende o
     trecho aceso do trilho. Linear de propósito — a seção
     seguinte (Ciclo) responde com o círculo. */

  .motor {
    position: relative;
    height: 340vh;
    background: var(--preto);
    color: var(--off);
    border-top: 1px solid rgba(247,240,234,0.16);
  }

  .motor .sec-eyebrow { color: var(--off); }
  .motor .sec-eyebrow::after { background: rgba(247,240,234,0.14); }

  .motor-stage {
    position: sticky;
    top: 0;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    padding: clamp(64px, 7vh, 96px) var(--pad-x) clamp(72px, 9vh, 112px);
  }

  .motor-inner {
    width: 100%;
    max-width: 1560px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .motor-grid {
    flex: 1;
    margin-top: clamp(32px, 5vh, 60px);
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 48px clamp(40px, 5vw, 96px);
    align-items: center;
  }

  .motor h2 {
    font-size: clamp(2.2rem, 3.4vw, 3.2rem);
    line-height: 1.05;
    letter-spacing: -0.015em;
  }

  .motor h2 .thin { display: block; font-weight: 100; }
  .motor h2 .bold { display: block; font-weight: 800; }

  .motor-sub {
    margin-top: 26px;
    font-size: 1.04rem;
    font-weight: 300;
    line-height: 1.65;
    color: rgba(247,240,234,0.72);
    max-width: 44ch;
  }

  /* índice dos movimentos: o mapa da seção na coluna esquerda —
     acende em ouro conforme o scroll percorre o método */
  .motor-indice {
    list-style: none;
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid rgba(247,240,234,0.12);
    display: grid;
    gap: 15px;
  }

  .motor-indice li {
    display: flex;
    align-items: baseline;
    gap: 14px;
    font-size: 0.66rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(247,240,234,0.38);
    transition: color 0.3s ease;
  }

  .motor-indice i {
    flex: none;
    width: 7px;
    height: 7px;
    transform: translateY(-1px);
    background: rgba(247,240,234,0.16);
    transition: background 0.3s ease;
  }

  .motor-indice b { font-weight: 400; }
  .motor-indice span { letter-spacing: 0.2em; }

  /* movimentos já percorridos: quadrado ouro, texto firme */
  .motor-stage[data-mov="0"] :is(.i1) i,
  .motor-stage[data-mov="1"] :is(.i1, .i2) i,
  .motor-stage[data-mov="2"] :is(.i1, .i2, .i3) i,
  .motor-stage[data-mov="3"] :is(.i1, .i2, .i3, .i4) i {
    background: var(--ouro);
  }

  .motor-stage[data-mov="1"] :is(.i1),
  .motor-stage[data-mov="2"] :is(.i1, .i2),
  .motor-stage[data-mov="3"] :is(.i1, .i2, .i3) {
    color: rgba(247,240,234,0.55);
  }

  /* movimento atual: linha inteira acesa, quadrado com halo */
  .motor-stage[data-mov="0"] .i1,
  .motor-stage[data-mov="1"] .i2,
  .motor-stage[data-mov="2"] .i3,
  .motor-stage[data-mov="3"] .i4 {
    color: var(--off);
  }

  .motor-stage[data-mov="0"] .i1 b,
  .motor-stage[data-mov="1"] .i2 b,
  .motor-stage[data-mov="2"] .i3 b,
  .motor-stage[data-mov="3"] .i4 b {
    color: var(--ouro);
  }

  .motor-stage[data-mov="0"] .i1 i,
  .motor-stage[data-mov="1"] .i2 i,
  .motor-stage[data-mov="2"] .i3 i,
  .motor-stage[data-mov="3"] .i4 i {
    box-shadow: 0 0 5px rgba(234,172,31,0.75);
  }

  /* placa de instrumento: mesma gramática da FIG. 02 da Dor */
  .motor-placa {
    position: relative;
    padding: 20px 30px 26px;
  }

  .motor-placa::before,
  .motor-placa::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
  }

  .motor-placa::before {
    top: 0; left: 0;
    border-top: 1px solid rgba(247,240,234,0.3);
    border-left: 1px solid rgba(247,240,234,0.3);
  }

  .motor-placa::after {
    bottom: 0; right: 0;
    border-bottom: 1px solid rgba(247,240,234,0.3);
    border-right: 1px solid rgba(247,240,234,0.3);
  }

  /* régua de ticks na borda direita — detalhe estático de instrumento */
  .motor-placa-regua {
    position: absolute;
    top: 70px;
    bottom: 34px;
    right: 0;
    width: 7px;
    background-image: repeating-linear-gradient(
      to bottom,
      rgba(247,240,234,0.28) 0, rgba(247,240,234,0.28) 1px,
      transparent 1px, transparent 13px);
  }

  /* painéis: um movimento visível por vez — o scroll troca */
  .motor-panels {
    position: relative;
    min-height: 420px;
  }

  .mov {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.45s ease, transform 0.45s ease;
  }

  .motor-stage[data-mov="0"] .mov:nth-of-type(1),
  .motor-stage[data-mov="1"] .mov:nth-of-type(2),
  .motor-stage[data-mov="2"] .mov:nth-of-type(3),
  .motor-stage[data-mov="3"] .mov:nth-of-type(4) {
    opacity: 1;
    transform: none;
  }

  /* numeral gigante: o ouro como material da seção, não detalhe */
  .mov-num {
    display: block;
    font-size: clamp(6rem, 10.5vw, 10rem);
    font-weight: 100;
    line-height: 0.92;
    letter-spacing: -0.02em;
    color: var(--ouro);
  }

  .mov h3 {
    margin-top: 18px;
    font-size: clamp(1.6rem, 2.2vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -0.012em;
    line-height: 1.15;
  }

  .mov p {
    margin-top: 14px;
    font-size: 1.02rem;
    font-weight: 300;
    line-height: 1.62;
    color: rgba(247,240,234,0.7);
    max-width: 46ch;
  }

  /* trilho de progresso: tubo apagado + trecho aceso que o scroll
     estende — estações percorridas ficam acesas */
  .trilho {
    position: relative;
    height: 42px;
    margin-top: clamp(40px, 5vh, 64px);
  }

  .trilho-linha {
    position: absolute;
    top: 12px; left: 0; right: 0;
    height: 2px;
    background: rgba(234,172,31,0.16);
  }

  .trilho-ticks {
    position: absolute;
    top: 18px; left: 0; right: 0;
    height: 5px;
    background-image: repeating-linear-gradient(
      to right,
      rgba(247,240,234,0.22) 0, rgba(247,240,234,0.22) 1px,
      transparent 1px, transparent 14px);
  }

  .trilho-fill {
    position: absolute;
    top: 12px; left: 0;
    height: 2px;
    width: calc(var(--prog, 0) * 100%);
    background: var(--ouro);
    box-shadow: 0 0 5px rgba(234,172,31,0.7);
    transition: width 0.6s ease;
  }

  .trilho-no { position: absolute; top: 13px; }
  .trilho-no.n1 { left: 0; }
  .trilho-no.n2 { left: 33.333%; }
  .trilho-no.n3 { left: 66.666%; }
  .trilho-no.n4 { left: 100%; }

  .trilho-no i {
    position: absolute;
    top: 0; left: 0;
    transform: translate(-50%, -50%);
    width: 9px;
    height: 9px;
    background: rgba(247,240,234,0.25);
  }

  .trilho-no b {
    position: absolute;
    top: 14px; left: 0;
    transform: translateX(-50%);
    font-weight: 400;
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    color: rgba(247,240,234,0.5);
    white-space: nowrap;
  }

  .trilho-no.n1 b { transform: none; left: -4px; }
  .trilho-no.n4 b { transform: translateX(-100%); left: 4px; }

  .motor-stage[data-mov="0"] :is(.n1) i,
  .motor-stage[data-mov="1"] :is(.n1, .n2) i,
  .motor-stage[data-mov="2"] :is(.n1, .n2, .n3) i,
  .motor-stage[data-mov="3"] :is(.n1, .n2, .n3, .n4) i {
    background: var(--ouro);
  }

  /* a estação atual ganha halo (fonte física) e label ouro */
  .motor-stage[data-mov="0"] .n1 i,
  .motor-stage[data-mov="1"] .n2 i,
  .motor-stage[data-mov="2"] .n3 i,
  .motor-stage[data-mov="3"] .n4 i {
    box-shadow: 0 0 5px rgba(234,172,31,0.75);
  }

  .motor-stage[data-mov="0"] .n1 b,
  .motor-stage[data-mov="1"] .n2 b,
  .motor-stage[data-mov="2"] .n3 b,
  .motor-stage[data-mov="3"] .n4 b {
    color: var(--ouro);
  }

  .motor-status {
    margin-top: 32px;
    padding-top: 14px;
    border-top: 1px solid rgba(247,240,234,0.12);
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    color: rgba(247,240,234,0.55);
  }

  .motor-status .frames {
    position: relative;
    display: inline-block;
  }

  .motor-status .frames span { opacity: 0; }
  .motor-status .frames span:nth-child(1) { position: relative; }
  .motor-status .frames span + span { position: absolute; left: 0; }

  .motor-stage[data-mov="0"] .frames span:nth-child(1),
  .motor-stage[data-mov="1"] .frames span:nth-child(2),
  .motor-stage[data-mov="2"] .frames span:nth-child(3),
  .motor-stage[data-mov="3"] .frames span:nth-child(4) { opacity: 1; }

  /* ---------- SEÇÃO 03 — O ECOSSISTEMA (preto — hub radial estático) ----------
     Resposta ao Motor linear: aqui as quatro frentes vivem como um
     sistema único. O instrumento é um hub — um núcleo central que
     distribui para quatro estações na borda. Sem órbita e sem rotor:
     o pulso parte do centro para fora, uma frente de cada vez
     (mesma doutrina neon do hero — tubo dourado único). */

  .servicos {
    background: var(--off);
    color: var(--preto);
    padding: clamp(64px, 7vh, 96px) var(--pad-x) clamp(88px, 11vh, 128px);
    position: relative;
    overflow: hidden;
    --hairline: rgba(22,21,20,0.08);
    --hairline-2: rgba(22,21,20,0.16);
  }

  .servicos-inner {
    max-width: 1560px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }

  .servicos-head {
    max-width: 760px;
    margin: 28px 0 0;
  }

  .servicos-head h2 {
    font-size: clamp(2.2rem, 4.2vw, 3.2rem);
    line-height: 1.06;
    letter-spacing: -0.02em;
    margin: 0;
  }

  .servicos-head h2 .thin { display: block; font-weight: 300; color: var(--sec); }
  .servicos-head h2 .bold { display: block; font-weight: 600; color: var(--preto); }

  .servicos-sub {
    margin: 22px 0 0;
    max-width: 560px;
    color: rgba(22,21,20,0.74);
    font-size: 1.04rem;
    line-height: 1.6;
  }

  /* as 4 fichas — cartões de frente alinhados à régua da seção */
  .eco-fichas {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto auto auto;
    margin-top: 64px;
    border-top: 1px solid var(--hairline-2);
  }

  .eco-fichas .ficha {
    position: relative;
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    padding: 32px 26px 8px;
    border-left: 1px solid var(--hairline);
  }
  .eco-fichas .ficha:first-child { border-left: 0; padding-left: 0; }
  .eco-fichas .ficha:last-child { padding-right: 0; }

  .eco-fichas .ficha::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 36px;
    height: 2px;
    background: var(--ouro);
  }

  .eco-fichas .ficha h3 {
    margin: 14px 0 0;
    font-size: 1.18rem;
    font-weight: 600;
    color: var(--preto);
    line-height: 1.2;
  }

  .eco-fichas .ficha p {
    margin: 12px 0 0;
    font-size: 0.94rem;
    line-height: 1.55;
    color: rgba(22,21,20,0.66);
  }

  .ficha-itens {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
  }

  .ficha-itens li {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    letter-spacing: 0.3px;
    color: rgba(22,21,20,0.82);
    padding: 7px 0 7px 16px;
    position: relative;
    border-top: 1px solid var(--hairline);
  }
  .ficha-itens li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 13px;
    width: 5px;
    height: 5px;
    background: var(--ouro);
  }

  /* ---------- SEÇÃO 04 — COMO OPERAMOS (off — prancha anotada) ----------
     A seção É uma prancha de engenharia full-width (FIG. 04): a linha da
     operação atravessa a página com 4 estações; a copy vive como legendas
     ligadas por linhas de chamada (cotas); as anotações de IA (com glifo
     de robô esquemático) marcam onde a aceleração acontece; a linha de
     retorno fecha o circuito por baixo. Overview, não raio-X.
     Único movimento autônomo deste viewport: o pulso do circuito (16s). */

  .operacao {
    background: var(--preto);
    color: var(--off);
    padding: 52px var(--pad-x) 120px;
    position: relative;
    overflow: hidden;
  }

  .operacao .sec-eyebrow { color: var(--off); }
  .operacao .sec-eyebrow::after { background: rgba(247,240,234,0.14); }

  .operacao-inner {
    max-width: 1560px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }

  .op-head {
    margin-top: 64px;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(40px, 5vw, 96px);
    align-items: end;
  }

  .operacao h2 {
    font-size: clamp(2.2rem, 3.4vw, 3.2rem);
    line-height: 1.05;
    letter-spacing: -0.015em;
  }

  .operacao h2 .thin { display: block; font-weight: 100; }
  .operacao h2 .bold { display: block; font-weight: 800; }

  .op-sub {
    font-size: 1.04rem;
    font-weight: 300;
    line-height: 1.65;
    color: rgba(247,240,234,0.72);
    max-width: 46ch;
  }

  /* ---------- FIG. 04 — prancha: linha de operação ---------- */

  .fig04 {
    position: relative;
    width: 100%;
    margin-top: 56px;
    padding: 20px 30px 26px;
  }

  .fig04::before,
  .fig04::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
  }

  .fig04::before {
    top: 0; left: 0;
    border-top: 1px solid rgba(247,240,234,0.3);
    border-left: 1px solid rgba(247,240,234,0.3);
  }

  .fig04::after {
    bottom: 0; right: 0;
    border-bottom: 1px solid rgba(247,240,234,0.3);
    border-right: 1px solid rgba(247,240,234,0.3);
  }

  .fig04-regua {
    position: absolute;
    top: 64px;
    bottom: 64px;
    right: 0;
    width: 7px;
    background-image: repeating-linear-gradient(
      to bottom,
      rgba(247,240,234,0.28) 0, rgba(247,240,234,0.28) 1px,
      transparent 1px, transparent 13px);
  }

  .fig04 svg {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 6px;
  }

  .fig04-status {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(247,240,234,0.16);
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    color: rgba(247,240,234,0.55);
  }

  .fig04-status i {
    font-style: normal;
    display: inline-block;
    width: 7px;
    height: 7px;
    background: var(--ouro);
    margin-right: 9px;
  }

  /* tipografia da prancha (SVG) */
  #op-svg text {
    font-family: 'JetBrains Mono', monospace;
    fill: var(--off);
  }

  #op-svg .pl-tag  { font-size: 11px; letter-spacing: 1.8px; fill: var(--ouro); }
  #op-svg .pl-nome { font-size: 15px; letter-spacing: 2.5px; font-weight: 700; }
  #op-svg .pl-copy { font-family: 'Outfit', sans-serif; font-size: 15px; font-weight: 300; fill: rgba(247,240,234,0.8); }
  #op-svg .pl-ia   { font-size: 11.5px; fill: rgba(247,240,234,0.62); }
  #op-svg .pl-read { font-size: 15px; letter-spacing: 2px; }
  #op-svg .pl-ret  { font-size: 10px; letter-spacing: 2.2px; fill: rgba(247,240,234,0.5); }

  /* ---------- linha de operação — versão vertical (mobile + leitores de tela) ---------- */

  .linha-m { margin-top: 4px; }

  .est-m {
    position: relative;
    padding: 22px 14px 24px 26px;
    border-left: 1px solid rgba(247,240,234,0.25);
  }

  .est-m::before {
    content: "";
    position: absolute;
    left: -5px;
    top: 30px;
    width: 9px;
    height: 9px;
    background: var(--ouro);
  }

  .est-m header {
    display: flex;
    align-items: baseline;
    gap: 12px;
  }

  .est-m header b {
    font-weight: 400;
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    color: var(--ouro);
  }

  .est-m header h3 {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.12em;
  }

  .est-m > p {
    margin-top: 10px;
    font-size: 0.98rem;
    font-weight: 300;
    line-height: 1.6;
    color: rgba(247,240,234,0.75);
    max-width: 52ch;
  }

  .ia-m {
    margin-top: 12px;
    display: flex;
    gap: 10px;
    font-size: 0.72rem;
    line-height: 1.55;
    color: rgba(247,240,234,0.62);
    max-width: 52ch;
    text-transform: none;
  }

  .ia-m svg {
    width: 18px;
    height: 17px;
    flex: none;
    margin-top: 1px;
  }

  .ret-m {
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid rgba(247,240,234,0.25);
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    color: rgba(247,240,234,0.55);
  }

  /* desktop: a prancha SVG carrega o visual; a versão vertical fica só para leitores de tela */
  @media (min-width: 881px) {
    .linha-m {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
  }

  /* fecho do ciclo — virada da seção */
  .op-fecho {
    margin-top: 88px;
    padding-top: 40px;
    border-top: 1px solid rgba(247,240,234,0.12);
    font-size: clamp(1.3rem, 1.9vw, 1.7rem);
    font-weight: 300;
    line-height: 1.45;
    letter-spacing: -0.01em;
    max-width: 52ch;
  }

  .op-fecho b { font-weight: 700; }

  .op-final {
    margin-top: 28px;
    font-size: 1.04rem;
    font-weight: 300;
    line-height: 1.65;
    color: rgba(247,240,234,0.72);
    max-width: 62ch;
  }

  .op-final b { font-weight: 700; color: var(--off); }

  .op-final i {
    font-style: normal;
    display: inline-block;
    width: 0.34em;
    height: 0.34em;
    background: var(--ouro);
    margin-left: 0.28em;
  }

  /* ---------- SEÇÃO 05 — QUEM SOMOS (preto — o instrumento lê os operadores) ----------
     A página inteira mostrou a máquina; aqui o mesmo instrumento
     lê quem a opera. Doutrina neon aplicada a gente: o retrato é
     o tubo apagado, o feixe de leitura é o trecho aceso, o
     indicador da ficha acende em sincronia (U.01–03, ciclo 16s). */

  .equipe {
    background: var(--preto);
    color: var(--off);
    padding: 52px var(--pad-x) 120px;
    position: relative;
    overflow: hidden;
  }

  .equipe-inner {
    max-width: 1560px;
    margin: 0 auto;
  }

  .equipe .sec-eyebrow { color: var(--off); }
  .equipe .sec-eyebrow::after { background: rgba(247,240,234,0.14); }

  .eq-head {
    margin-top: 64px;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(40px, 5vw, 96px);
    align-items: end;
  }

  .equipe h2 {
    font-size: clamp(2.2rem, 3.4vw, 3.2rem);
    line-height: 1.05;
    letter-spacing: -0.015em;
  }

  .equipe h2 .thin { display: block; font-weight: 100; }
  .equipe h2 .bold { display: block; font-weight: 800; }

  .eq-sub {
    font-size: 1.04rem;
    font-weight: 300;
    line-height: 1.65;
    color: rgba(247,240,234,0.72);
    max-width: 46ch;
  }

  /* ---------- FIG. 05 — fichas de unidade ---------- */

  .fig05 {
    position: relative;
    width: 100%;
    margin-top: 56px;
    padding: 20px 30px 26px;
  }

  .fig05::before,
  .fig05::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
  }

  .fig05::before {
    top: 0; left: 0;
    border-top: 1px solid var(--hairline-2);
    border-left: 1px solid var(--hairline-2);
  }

  .fig05::after {
    bottom: 0; right: 0;
    border-bottom: 1px solid var(--hairline-2);
    border-right: 1px solid var(--hairline-2);
  }

  .fig05-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    color: rgba(247,240,234,0.55);
    padding-bottom: 14px;
    border-bottom: 1px solid var(--hairline-2);
  }

  /* readout do leitor: U.0X/03 — mesmo recurso de frames da FIG. 02 */
  .fig05-frames { position: relative; }
  .fig05-frames span { opacity: 0; white-space: nowrap; }
  .fig05-frames span:nth-child(1) { position: relative; animation: u-frame 16s linear infinite; }
  .fig05-frames span + span { position: absolute; right: 0; top: 0; }
  .fig05-frames span:nth-child(2) { animation: u-frame 16s linear infinite 5.3333s; }
  .fig05-frames span:nth-child(3) { animation: u-frame 16s linear infinite 10.6667s; }

  .fig05-regua {
    position: absolute;
    top: 64px;
    bottom: 64px;
    right: 0;
    width: 7px;
    background-image: repeating-linear-gradient(
      to bottom,
      rgba(247,240,234,0.25) 0, rgba(247,240,234,0.25) 1px,
      transparent 1px, transparent 13px);
  }

  .fichas {
    margin-top: 34px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(28px, 3.4vw, 64px);
  }

  .retrato {
    position: relative;
    border: 1px solid var(--hairline);
    aspect-ratio: 5 / 6;
    overflow: hidden;
    background: #1C1B19;
  }

  /* vídeo do sócio = base; o scanner (HUD) fica por cima como moldura de leitura */
  .u-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(1);
  }

  /* placeholder enquanto o arquivo de vídeo não foi adicionado pelo operador */
  .u-video-ph {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    letter-spacing: 0.24em;
    color: rgba(247,240,234,0.32);
    pointer-events: none;
  }

  .u-hud {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }

  /* a unidade "acende" (cor plena) na sua janela de leitura e esmaece depois —
     mesma coreografia do feixe/led (ciclo 16s, terços) */
  .ficha:nth-of-type(1) .u-video { animation: u-reveal 16s linear infinite; }
  .ficha:nth-of-type(2) .u-video { animation: u-reveal 16s linear infinite 5.3333s; }
  .ficha:nth-of-type(3) .u-video { animation: u-reveal 16s linear infinite 10.6667s; }

  @keyframes u-reveal {
    0%     { filter: grayscale(0); }
    31%    { filter: grayscale(0); }
    33.33% { filter: grayscale(1); }
    100%   { filter: grayscale(1); }
  }

  .u-idx {
    display: flex;
    align-items: center;
    margin-top: 22px;
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    color: var(--sec);
  }

  .u-led {
    display: inline-block;
    width: 7px;
    height: 7px;
    background: var(--ouro);
    opacity: 0.25;
    margin-right: 9px;
  }

  .ficha h3 {
    margin-top: 10px;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
  }

  .u-funcao {
    margin-top: 6px;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    color: rgba(247,240,234,0.55);
  }

  .u-desc {
    margin-top: 14px;
    font-size: 0.95rem;
    font-weight: 300;
    line-height: 1.6;
    color: rgba(247,240,234,0.7);
    max-width: 38ch;
  }

  /* indicador da ficha acende no terço do seu retrato */
  .ficha:nth-of-type(1) .u-led { animation: u-led 16s linear infinite; }
  .ficha:nth-of-type(2) .u-led { animation: u-led 16s linear infinite 5.3333s; }
  .ficha:nth-of-type(3) .u-led { animation: u-led 16s linear infinite 10.6667s; }

  .ficha:nth-of-type(1) .u-idx { animation: u-idx 16s linear infinite; }
  .ficha:nth-of-type(2) .u-idx { animation: u-idx 16s linear infinite 5.3333s; }
  .ficha:nth-of-type(3) .u-idx { animation: u-idx 16s linear infinite 10.6667s; }

  @keyframes u-led {
    0%      { opacity: 1; }
    31%     { opacity: 1; }
    33.33%  { opacity: 0.25; }
    100%    { opacity: 0.25; }
  }

  @keyframes u-idx {
    0%      { color: var(--ouro); }
    31%     { color: var(--ouro); }
    33.33%  { color: var(--sec); }
    100%    { color: var(--sec); }
  }

  @keyframes u-frame {
    0%      { opacity: 1; }
    32%     { opacity: 1; }
    33.33%  { opacity: 0; }
    100%    { opacity: 0; }
  }

  .fig05-status {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 34px;
    padding-top: 14px;
    border-top: 1px solid var(--hairline-2);
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    color: rgba(247,240,234,0.55);
  }

  .fig05-status i {
    font-style: normal;
    display: inline-block;
    width: 7px;
    height: 7px;
    background: var(--ouro);
    margin-right: 9px;
  }

  .eq-cta { margin-top: 64px; }

  /* ---------- SEÇÃO 06 — VAMOS CONVERSAR (preto — entrada manual) ----------
     A página inteira mostrou o sistema operando sozinho. O fecho
     inverte a doutrina neon: o CTA é o único tubo da página que
     NÃO acende por conta própria — dá o strike quando o leitor
     chega (one-shot, nunca loop) e intensifica sob a mão (hover).
     Quem liga a próxima etapa é o visitante. */

  .conversa {
    background: var(--preto);
    color: var(--off);
    padding: 52px var(--pad-x) 130px;
    border-top: 1px solid var(--hairline);
    position: relative;
    overflow: hidden;
  }

  .conversa-inner {
    max-width: 1560px;
    margin: 0 auto;
  }

  .conversa .sec-eyebrow { color: var(--off); }
  .conversa .sec-eyebrow::after { background: rgba(247,240,234,0.14); }

  .conversa-core {
    max-width: 1080px;
    margin: 110px auto 0;
    text-align: center;
  }

  .conversa h2 {
    font-size: clamp(2.3rem, 3.6vw, 3.3rem);
    line-height: 1.08;
    letter-spacing: -0.015em;
  }

  .conversa h2 .thin { display: block; font-weight: 100; }
  .conversa h2 .bold { display: block; font-weight: 800; }

  .conversa-sub {
    margin: 26px auto 0;
    font-size: 1.04rem;
    font-weight: 300;
    line-height: 1.65;
    color: rgba(247,240,234,0.72);
    max-width: 52ch;
  }

  .conversa-cta {
    margin-top: 52px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 36px;
    flex-wrap: wrap;
  }

  /* o tubo apagado: mesma luz da órbita em repouso (ouro 0.14) */
  .btn-tube {
    display: inline-block;
    border: 1px solid rgba(234,172,31,0.14);
    background: transparent;
    color: rgba(247,240,234,0.55);
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.01em;
    padding: 18px 38px;
  }

  /* strike-on: flicker irregular de tubo real ligando — roda UMA vez */
  .conversa.lit .btn-tube { animation: strike 0.95s linear forwards; }

  /* estado aceso (pós-ignição): vira o CTA primário da página */
  .conversa.aceso .btn-tube {
    animation: none;
    background: var(--ouro);
    border-color: var(--ouro);
    color: var(--preto);
    box-shadow: 0 0 5px rgba(234,172,31,0.35);
    transition: background 0.15s ease, box-shadow 0.15s ease;
  }

  .conversa.aceso .btn-tube:hover,
  .conversa.aceso .btn-tube:focus-visible {
    background: var(--ouro-hov);
    border-color: var(--ouro-hov);
    box-shadow: 0 0 5px rgba(242,188,61,0.55);
  }

  @keyframes strike {
    0%, 7.9%   { background: transparent; border-color: rgba(234,172,31,0.14); color: rgba(247,240,234,0.55); box-shadow: none; }
    8%, 9.9%   { background: var(--ouro); border-color: var(--ouro); color: var(--preto); box-shadow: 0 0 5px rgba(234,172,31,0.35); }
    10%, 21.9% { background: transparent; border-color: rgba(234,172,31,0.14); color: rgba(247,240,234,0.55); box-shadow: none; }
    22%, 24.9% { background: var(--ouro); border-color: var(--ouro); color: var(--preto); box-shadow: 0 0 5px rgba(234,172,31,0.35); }
    25%, 30.9% { background: transparent; border-color: rgba(234,172,31,0.14); color: rgba(247,240,234,0.55); box-shadow: none; }
    31%, 100%  { background: var(--ouro); border-color: var(--ouro); color: var(--preto); box-shadow: 0 0 5px rgba(234,172,31,0.35); }
  }

  /* readout de instrumento: o indicador espera a ignição e então
     pisca como cursor de terminal — o sistema aguarda a SUA entrada */
  .canal {
    margin-top: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    color: rgba(247,240,234,0.55);
  }

  .canal i {
    font-style: normal;
    width: 7px;
    height: 7px;
    background: var(--ouro);
    opacity: 0.25;
    margin-right: 9px;
  }

  .conversa.aceso .canal i { animation: canal-blink 1.6s linear infinite; }

  @keyframes canal-blink {
    0%, 49.9% { opacity: 1; }
    50%, 100% { opacity: 0.25; }
  }

  @media (prefers-reduced-motion: reduce) {
    .conversa .btn-tube,
    .conversa.lit .btn-tube {
      animation: none;
      background: var(--ouro);
      border-color: var(--ouro);
      color: var(--preto);
      box-shadow: 0 0 5px rgba(234,172,31,0.35);
    }
    .conversa.aceso .canal i { animation: none; opacity: 1; }
  }

  /* ---------- FORMULÁRIO DE DIAGNÓSTICO (Seção 06) ----------
     Campos no padrão agência: identificação + e-mail + serviço +
     mensagem. Inputs hairline sobre o preto, foco dourado, botão
     primário ouro sólido. Substitui o botão-tubo no fecho. */

  .conversa-form {
    margin: 46px auto 0;
    max-width: 580px;
    display: grid;
    gap: 18px;
    text-align: left;
  }

  .cf-row { display: grid; gap: 18px; }
  @media (min-width: 620px) { .cf-row { grid-template-columns: 1fr 1fr; } }

  .cf-field { display: flex; flex-direction: column; gap: 8px; }

  .cf-field label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(247,240,234,0.5);
  }

  .cf-field label .req { color: var(--ouro); }

  .conversa-form input,
  .conversa-form select,
  .conversa-form textarea {
    font-family: inherit;
    font-size: 0.98rem;
    font-weight: 300;
    color: var(--off);
    background: rgba(247,240,234,0.03);
    border: 1px solid var(--hairline-2);
    padding: 13px 15px;
    width: 100%;
    transition: border-color 0.15s ease, background 0.15s ease;
  }

  .conversa-form input::placeholder,
  .conversa-form textarea::placeholder { color: rgba(247,240,234,0.32); }

  .conversa-form input:focus,
  .conversa-form select:focus,
  .conversa-form textarea:focus {
    outline: none;
    border-color: var(--ouro);
    background: rgba(247,240,234,0.05);
  }

  .conversa-form select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23EAAC1F' stroke-width='1.4' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
  }
  .conversa-form select option { color: var(--preto); }

  .conversa-form textarea { resize: vertical; min-height: 96px; line-height: 1.5; }

  .cf-submit {
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--ouro);
    color: var(--preto);
    border: 1px solid var(--ouro);
    font-family: inherit;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.01em;
    padding: 16px 32px;
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease;
  }

  .cf-submit:hover,
  .cf-submit:focus-visible {
    background: var(--ouro-hov);
    box-shadow: 0 0 5px rgba(242,188,61,0.55);
  }

  .cf-reforco {
    margin-top: 2px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(247,240,234,0.5);
    text-align: center;
  }

  .conversa-form.hide { display: none; }

  /* readout de sucesso: o canal "registra a entrada" */
  .conversa-ok {
    display: none;
    margin: 46px auto 0;
    max-width: 580px;
    border: 1px solid var(--ouro);
    box-shadow: 0 0 5px rgba(234,172,31,0.3);
    padding: 34px 32px;
    text-align: center;
  }
  .conversa-ok.show { display: block; }
  .conversa-ok .canal { margin-top: 0; }
  .conversa-ok p.ok-txt {
    margin-top: 14px;
    font-weight: 300;
    line-height: 1.6;
    color: rgba(247,240,234,0.82);
  }

  /* ---------- CTA FLUTUANTE — tubo mínimo ----------
     Pílula única centralizada na base da viewport. Repousa como
     tubo de instrumento aceso (cápsula escura, borda dourada,
     quadradinho que pisca) e "ignita" para ouro sólido no hover.
     Surge ao sair da Seção 01; recolhe na Seção 06. */

  .cta-flutua {
    position: fixed;
    left: 50%;
    bottom: 30px;
    z-index: 90;
    transform: translate(-50%, 220%);
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
  }

  .cta-flutua.show { transform: translate(-50%, 0); }

  .cta-flutua-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: rgba(22,21,20,0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--ouro);
    color: var(--off);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.96rem;
    letter-spacing: 0.01em;
    padding: 15px 30px;
    white-space: nowrap;
    box-shadow: 0 0 5px rgba(234,172,31,0.3), 0 12px 34px rgba(0,0,0,0.4);
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  }

  .cta-flutua-btn:hover,
  .cta-flutua-btn:focus-visible {
    background: var(--ouro);
    color: var(--preto);
    box-shadow: 0 0 6px rgba(242,188,61,0.55), 0 12px 34px rgba(0,0,0,0.4);
  }

  /* quadradinho dourado que pisca — assinatura de instrumento do site */
  .cta-flutua-btn i {
    font-style: normal;
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    background: var(--ouro);
    animation: cta-blink 1.6s linear infinite;
  }

  .cta-flutua-btn:hover i,
  .cta-flutua-btn:focus-visible i { background: var(--preto); animation: none; }

  .cta-flutua-btn .arr { color: var(--ouro); transition: color 0.15s ease; }
  .cta-flutua-btn:hover .arr,
  .cta-flutua-btn:focus-visible .arr { color: var(--preto); }

  @keyframes cta-blink {
    0%, 49.9% { opacity: 1; }
    50%, 100% { opacity: 0.25; }
  }

  @media (prefers-reduced-motion: reduce) {
    .cta-flutua { transition: none; }
    .cta-flutua-btn i { animation: none; }
  }

  /* ---------- FOOTER — placa de identificação ----------
     Hierarquia plana de placa de equipamento: moldura hairline
     com cantoneiras, colunas mono, zero ornamento. */

  .rodape {
    background: var(--preto-2);
    color: var(--off);
    border-top: 1px solid var(--hairline);
    padding: 64px var(--pad-x) 28px;
  }

  .rodape-inner {
    max-width: 1560px;
    margin: 0 auto;
  }

  .rodape-placa {
    position: relative;
    padding: 40px 44px 44px;
    border: 1px solid var(--hairline);
    overflow: hidden;
  }

  /* padronagem oficial gravada na placa — estática, tom de hairline */
  .rodape-padrao {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    max-width: 30%;
    height: 100%;
    object-fit: cover;
    object-position: 100% 50%;
    opacity: 0.04;
    -webkit-mask-image: linear-gradient(to right, transparent, #000000 55%);
    mask-image: linear-gradient(to right, transparent, #000000 55%);
    pointer-events: none;
  }

  /* marca de fundo — mesma padronagem oficial do rodapé, gravada como
     assinatura faint nas placas escuras (sangra da borda, máscara, sem clique) */
  .marca-fundo {
    position: absolute;
    top: 0;
    width: 380px;
    max-width: 30%;
    height: 100%;
    object-fit: cover;
    opacity: 0.04;
    pointer-events: none;
    z-index: 0;
  }

  .marca-fundo--dir {
    right: 0;
    object-position: 100% 50%;
    -webkit-mask-image: linear-gradient(to right, transparent, #000000 62%);
    mask-image: linear-gradient(to right, transparent, #000000 62%);
  }

  .marca-fundo--esq {
    left: 0;
    object-position: 0% 50%;
    transform: scaleX(-1);
    -webkit-mask-image: linear-gradient(to right, transparent, #000000 62%);
    mask-image: linear-gradient(to right, transparent, #000000 62%);
  }

  /* hachura de prancha técnica — cantos da hero */
  .hachura-tl,
  .hachura-br {
    position: absolute;
    width: 520px;
    max-width: 34%;
    height: 40%;
    pointer-events: none;
    z-index: 0;
    background-image: repeating-linear-gradient(
      135deg,
      rgba(247,240,234,0.17) 0, rgba(247,240,234,0.17) 1px,
      transparent 1px, transparent 8px);
  }

  /* topo-esquerdo: desce o suficiente para apoiar o eyebrow,
     dissipando antes do headline */
  .hachura-tl {
    left: 0;
    top: 0;
    -webkit-mask-image:
      linear-gradient(to right, #000000 0%, #000000 26%, transparent 92%),
      linear-gradient(to bottom, #000000 0%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to right, #000000 0%, #000000 26%, transparent 92%),
      linear-gradient(to bottom, #000000 0%, transparent 100%);
    mask-composite: intersect;
  }

  /* inferior-direito: diagonal oposta, ancora no canto e sobe */
  .hachura-br {
    right: 0;
    bottom: 0;
    -webkit-mask-image:
      linear-gradient(to left, #000000 0%, #000000 26%, transparent 92%),
      linear-gradient(to top, #000000 0%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to left, #000000 0%, #000000 26%, transparent 92%),
      linear-gradient(to top, #000000 0%, transparent 100%);
    mask-composite: intersect;
  }

  .rodape-placa::before,
  .rodape-placa::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
  }

  .rodape-placa::before {
    top: -1px; left: -1px;
    border-top: 1px solid var(--hairline-2);
    border-left: 1px solid var(--hairline-2);
  }

  .rodape-placa::after {
    bottom: -1px; right: -1px;
    border-bottom: 1px solid var(--hairline-2);
    border-right: 1px solid var(--hairline-2);
  }

  .rodape-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
    gap: clamp(32px, 4vw, 72px);
  }

  .rodape-tagline {
    margin-top: 18px;
    font-size: 0.92rem;
    font-weight: 300;
    line-height: 1.65;
    color: var(--sec);
    max-width: 34ch;
  }

  .rodape-head {
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    color: rgba(247,240,234,0.55);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--hairline);
    margin-bottom: 18px;
  }

  .rodape-col ul { list-style: none; }

  .rodape-col li {
    margin-bottom: 10px;
    font-size: 0.92rem;
    font-weight: 300;
    line-height: 1.5;
    color: var(--sec);
  }

  .rodape-col a {
    color: var(--sec);
    text-decoration: none;
    transition: color 0.18s ease;
  }

  .rodape-col a:hover { color: var(--off); }

  /* contatos pendentes — placeholders marcados, operador fornece */
  .rodape .ph {
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: rgba(247,240,234,0.38);
  }

  .rodape-base {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: 22px;
    padding-top: 18px;
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    color: rgba(247,240,234,0.45);
  }

  .rodape-base a {
    color: inherit;
    text-decoration: none;
    transition: color 0.18s ease;
  }

  .rodape-base a:hover { color: var(--off); }

  /* ---------- SEÇÃO 06 — POR QUE ESCOLHEM A P1 (placa de síntese) ----------
     Entre dois blocos escuros (Quem somos / CTA): volta clara, quebra o
     corrido escuro e lê como placa-resumo. Ledger de 4 razões — vocabulário
     de instrumento (índice mono + tick ouro + cantoneira), porém estático:
     não clona a varredura da Dor. */

  .escolha {
    background: var(--off);
    color: var(--preto);
    padding: 56px var(--pad-x) 110px;
    position: relative;
    overflow: hidden;
  }

  .escolha-inner {
    max-width: 1560px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }

  /* cabeçalho: linha introdutória (legenda + hairline full-width) em cima,
     título logo abaixo dela */
  .escolha-top {
    margin-top: 64px;
  }

  .escolha h2 {
    font-size: clamp(2.2rem, 3.4vw, 3.2rem);
    line-height: 1.05;
    letter-spacing: -0.015em;
    margin-top: 34px;
    max-width: 26ch;
  }

  .escolha h2 .thin { display: block; font-weight: 100; }
  .escolha h2 .bold { display: block; font-weight: 800; }

  /* FIG.06 — diagrama de convergência: instrumento próprio da seção
     (não clona a varredura da Dor nem o circuito da operação). As quatro
     razões entram como sinais e se somam num único nó aceso. */
  .fig06 {
    position: relative;
    margin-top: 40px;
    padding: 22px 4px 8px;
  }

  .fig06::before,
  .fig06::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
  }

  .fig06::before {
    top: 0; left: 0;
    border-top: 1px solid rgba(22,21,20,0.3);
    border-left: 1px solid rgba(22,21,20,0.3);
  }

  .fig06::after {
    bottom: 0; right: 0;
    border-bottom: 1px solid rgba(22,21,20,0.3);
    border-right: 1px solid rgba(22,21,20,0.3);
  }

  .fig06 svg {
    display: block;
    width: 100%;
    height: auto;
  }

  #esc-svg text { font-family: 'JetBrains Mono', monospace; fill: var(--preto); }
  #esc-svg .e-tag  { font-size: 11px; letter-spacing: 1.8px; fill: var(--ouro-esc); }
  #esc-svg .e-tit  { font-size: 19px; letter-spacing: -0.2px; }
  #esc-svg .e-thin { font-family: 'Outfit', sans-serif; font-weight: 300; fill: rgba(22,21,20,0.72); }
  #esc-svg .e-bold { font-family: 'Outfit', sans-serif; font-weight: 800; }
  #esc-svg .e-sub  { font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 300; fill: rgba(22,21,20,0.6); }
  #esc-svg .e-term { font-size: 12px; letter-spacing: 2px; fill: var(--ouro-esc); }
  #esc-svg .e-port { fill: var(--off); stroke: rgba(22,21,20,0.4); stroke-width: 1.2; }

  /* fallback vertical (mobile + leitores de tela) */
  .razao-m { list-style: none; margin: 0; padding: 0; }

  .razao-mi {
    position: relative;
    padding: 26px 0 28px 26px;
    border-left: 1px solid rgba(22,21,20,0.2);
    border-bottom: 1px solid rgba(22,21,20,0.12);
  }

  .razao-mi::before {
    content: "";
    position: absolute;
    left: -5px; top: 32px;
    width: 9px; height: 9px;
    background: var(--ouro-esc);
  }

  .razao-mtag {
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    color: var(--ouro-esc);
  }

  .razao-mi h3 {
    margin-top: 12px;
    font-size: 1.42rem;
    line-height: 1.16;
    letter-spacing: -0.012em;
  }

  .razao-thin { font-weight: 200; color: rgba(22,21,20,0.78); }
  .razao-bold { font-weight: 800; }

  .razao-mi p {
    margin-top: 12px;
    font-size: 0.96rem;
    font-weight: 300;
    line-height: 1.6;
    color: rgba(22,21,20,0.64);
    max-width: 52ch;
  }

  /* desktop: o diagrama SVG carrega o visual; a versão vertical fica sr-only */
  @media (min-width: 881px) {
    .razao-m {
      position: absolute;
      width: 1px; height: 1px;
      padding: 0; margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
  }

  /* ---------- RESPONSIVO ---------- */

  @media (max-width: 1080px) {
    :root { --pad-x: 40px; }
  }

  @media (max-width: 880px) {
    :root { --pad-x: 24px; }

    .nav-links { display: none; }

    .hero { min-height: 0; }

    .hero-inner {
      grid-template-columns: 1fr;
      gap: 48px;
      padding-top: 56px;
      padding-bottom: 48px;
    }

    h1 { font-size: clamp(2.45rem, 11vw, 3.2rem); }

    .sub { font-size: 1rem; margin-bottom: 36px; }

    .cta-row { gap: 24px; }

    .btn-primary {
      padding: 15px 26px;
      font-size: 0.94rem;
    }

    .diagram {
      justify-self: center;
      max-width: 420px;
      padding: 18px 6px 14px;
    }

    .hero-meta span:last-child { display: none; }

    .motor { height: 330vh; }
    .motor-stage { padding: 56px var(--pad-x) 64px; }

    .motor-grid {
      grid-template-columns: 1fr;
      gap: 24px;
      align-items: start;
      padding: 14px 0 4px;
    }

    .motor-sub { margin-top: 16px; }

    /* mobile: o trilho já dá a orientação M.01–04 — índice sai */
    .motor-indice { display: none; }

    .motor-placa { padding: 16px 14px 18px; }

    .motor-placa-regua { display: none; }

    .motor-panels { min-height: 310px; }

    .motor-status { margin-top: 20px; }

    .mov { justify-content: flex-start; }

    .mov-num { font-size: clamp(4.4rem, 13vw, 5.5rem); }

    .servicos { padding: 44px var(--pad-x) 90px; }

    .servicos-head { margin-top: 12px; }

    .servicos-sub { max-width: none; }


    .eco-fichas {
      grid-template-columns: 1fr;
      margin-top: 52px;
      border-top: 0;
    }

    .eco-fichas .ficha {
      border-left: 0;
      padding: 28px 0 8px;
      border-top: 1px solid var(--hairline-2);
    }

    .eco-fichas .ficha:first-child { padding-left: 0; }

    .eco-fichas .ficha:last-child { padding-right: 0; }

    .operacao { padding: 44px var(--pad-x) 90px; }

    .op-head {
      grid-template-columns: 1fr;
      gap: 0;
      margin-top: 48px;
    }

    .op-head .op-sub { margin-top: 22px; }

    .fig04 {
      margin-top: 44px;
      padding: 18px 6px 14px;
    }

    /* mobile: a prancha horizontal sai, a linha vertical assume */
    #op-svg { display: none; }

    .op-fecho { margin-top: 56px; padding-top: 32px; }

    .equipe { padding: 44px var(--pad-x) 90px; }

    .eq-head {
      grid-template-columns: 1fr;
      gap: 0;
      margin-top: 48px;
    }

    .eq-head .eq-sub { margin-top: 22px; }

    .fig05 {
      margin-top: 44px;
      padding: 18px 14px 14px;
    }

    .fichas {
      grid-template-columns: 1fr;
      gap: 48px;
    }

    .retrato { max-width: 300px; }

    .eq-cta { margin-top: 56px; }

    .conversa { padding: 44px var(--pad-x) 100px; }

    .conversa-core { margin-top: 80px; }

    .rodape { padding: 48px var(--pad-x) 24px; }

    .rodape-placa { padding: 32px 24px 36px; }
    .rodape-padrao { display: none; }

    .rodape-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 40px 32px;
    }

    .dor { padding: 48px var(--pad-x) 80px; }

    .dor-grid {
      margin-top: 48px;
      grid-template-columns: 1fr;
      gap: 56px;
    }

    .virada { margin-top: 40px; }

    .escolha { padding: 44px var(--pad-x) 84px; }

    .escolha-top { margin-top: 48px; }

    .fig06 { margin-top: 28px; }

    #esc-svg { display: none; }
  }

  /* Telas pequenas: todo o conteúdo cabe numa coluna de 375px
     (alinhada à esquerda), sem overflow horizontal. */
  @media (max-width: 540px) {
    .nav-cta { padding: 10px 14px; font-size: 0.66rem; }

    .cta-flutua { bottom: 22px; }
    .cta-flutua-btn { padding: 13px 24px; font-size: 0.9rem; gap: 10px; }

    /* CTA da navbar nunca passa de x=375 (hairline segue full-width) */
    .nav { padding-right: max(var(--pad-x), calc(100% - 351px)); }

    .hero-inner { gap: 40px; }

    .copy { max-width: 327px; }

    h1 { font-size: clamp(2.1rem, 9.4vw, 2.4rem); }

    .sub { font-size: 0.98rem; margin-bottom: 32px; }

    .cta-row { gap: 16px 20px; }

    /* diagrama escala para caber inteiro em 375px */
    .diagram {
      justify-self: start;
      max-width: 327px;
      padding: 16px 4px 12px;
    }

    /* labels do SVG re-escalados para legibilidade no mobile */
    #loop-svg .lbl {
      font-size: 21px;
      letter-spacing: 1px;
    }
    #loop-svg .lbl-02 { text-anchor: middle; transform: translate(-22px, -24px); }
    #loop-svg .lbl-04 { text-anchor: middle; transform: translate(22px, -24px); }
    #loop-svg .arc-lbl {
      font-size: 13px;
      letter-spacing: 1.5px;
    }

    .servicos-head h2 { font-size: clamp(1.9rem, 8.4vw, 2.2rem); }

    .servicos-sub { font-size: 0.98rem; }


    .ficha h3 { font-size: 1.08rem; }

    .ficha p { font-size: 0.92rem; }

    .ficha-itens li { font-size: 11px; }

    .dor h2 { font-size: clamp(1.9rem, 8.4vw, 2.2rem); }

    .dor-abertura { font-size: 0.98rem; }

    .fig02 { padding: 16px 12px 14px; }

    .leitura {
      grid-template-columns: 72px minmax(0, 1fr);
      gap: 6px 16px;
      padding: 18px 0;
    }

    .leitura h3 { font-size: 1.08rem; }

    .leitura p { font-size: 0.92rem; }

    .fig02-status { letter-spacing: 0.12em; }

    .virada { font-size: clamp(1.2rem, 5.2vw, 1.4rem); }

    .motor h2 { font-size: clamp(1.9rem, 8.4vw, 2.2rem); }

    .motor-sub { font-size: 0.95rem; }

    .motor-panels { min-height: 310px; }

    .mov-num { font-size: 4rem; }

    .mov h3 { font-size: 1.35rem; margin-top: 14px; }

    .mov p { font-size: 0.95rem; max-width: none; }

    .trilho-no b { font-size: 0.55rem; letter-spacing: 0.1em; }

    .motor-status { letter-spacing: 0.12em; }

    .operacao h2 { font-size: clamp(1.9rem, 8.4vw, 2.2rem); }

    .op-sub { font-size: 0.98rem; }

    .fig04 { padding: 16px 2px 12px; }

    .fig04-status { letter-spacing: 0.12em; }

    .est-m { padding: 20px 0 22px 22px; }

    .est-m > p { font-size: 0.92rem; }

    .ia-m { font-size: 0.7rem; }

    .op-fecho { font-size: clamp(1.2rem, 5.2vw, 1.4rem); }

    .equipe h2 { font-size: clamp(1.9rem, 8.4vw, 2.2rem); }

    .eq-sub { font-size: 0.98rem; }

    .fig05 { padding: 16px 8px 12px; }

    .fig05-head, .fig05-status { letter-spacing: 0.12em; }

    /* readout é ornamento (aria-hidden) — sai no mobile p/ não quebrar o layout */
    .fig05-frames { display: none; }

    .u-desc { font-size: 0.92rem; max-width: none; }

    .conversa h2 { font-size: clamp(1.9rem, 8.4vw, 2.2rem); }

    .conversa-sub { font-size: 0.98rem; }

    .conversa-cta { gap: 18px 20px; }

    .btn-tube { padding: 15px 26px; font-size: 0.94rem; }

    .canal { letter-spacing: 0.12em; }

    .rodape-grid { grid-template-columns: 1fr; gap: 36px; }

    .rodape-base {
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
    }
  }

  /* ---------- MOTION ---------- */
  /* Toda a motion da página vive no SVG (SMIL). O congelamento em
     prefers-reduced-motion é feito via svg.pauseAnimations() no JS mínimo
     abaixo — o sistema para num estado bonito: pulso na etapa 02. */

  /* ---------- OCULTAÇÃO TEMPORÁRIA ---------- */
  /* Esconde a Seção 05 (Nossos fundadores) enquanto os vídeos dos sócios
     não ficam prontos. Reversível: basta remover a classe "secao-oculta"
     do <section id="quem-somos"> no index.html. */
  .secao-oculta { display: none !important; }

  /* ---------- FORMULÁRIO: honeypot + erro ---------- */
  /* Honeypot anti-spam: fora da tela, invisível e sem foco por teclado. */
  .cf-trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }
  /* Mensagem de falha de envio: oculta até o JS adicionar .show */
  .conversa-erro {
    display: none;
    margin-top: 18px;
    color: #EAAC1F;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    line-height: 1.5;
  }
  .conversa-erro.show { display: block; }