/* ============================================================
   ROPE TEC — Elementos gráficos  v3
   Tokens do Design System (styles.css). Sem dependências.
   Classes prefixadas .rt-
   ============================================================ */

:root {
  --rt-orange: var(--orange-500, #F58E11);
  --rt-charcoal: var(--charcoal-900, #18181A);
  --rt-steel: var(--charcoal-600, #3D3D41);
  --rt-hazard: var(--hazard-500, #F2C200);
  --rt-trava: var(--red-500, #C0392B);
  --rt-ease: cubic-bezier(.2, .7, .3, 1);
  --rt-snap: cubic-bezier(.16, 1.2, .3, 1);
}

/* ============================================================
   1. PADRÕES DE FUNDO
   ============================================================ */
.rt-pat-hazard {
  background-image: repeating-linear-gradient(45deg,
      var(--rt-orange) 0 14px, var(--rt-charcoal) 14px 28px);
}
.rt-pat-hazard--vis {
  background-image: repeating-linear-gradient(45deg,
      var(--rt-hazard) 0 14px, var(--rt-charcoal) 14px 28px);
}
.rt-pat-grid {
  background-color: var(--rt-charcoal);
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .055) 1px, transparent 1px),
    linear-gradient(to right, rgba(255, 255, 255, .11) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .11) 1px, transparent 1px);
  background-size: 16px 16px, 16px 16px, 96px 96px, 96px 96px;
}
.rt-pat-grid--claro {
  background-color: var(--bg-page, #F6F5F3);
  background-image:
    linear-gradient(to right, rgba(24, 24, 26, .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(24, 24, 26, .05) 1px, transparent 1px),
    linear-gradient(to right, rgba(24, 24, 26, .1) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(24, 24, 26, .1) 1px, transparent 1px);
  background-size: 16px 16px, 16px 16px, 96px 96px, 96px 96px;
}
.rt-pat-malha {
  background-color: var(--rt-charcoal);
  background-image:
    repeating-linear-gradient(45deg, rgba(245, 142, 17, .22) 0 1.5px, transparent 1.5px 17px),
    repeating-linear-gradient(-45deg, rgba(245, 142, 17, .22) 0 1.5px, transparent 1.5px 17px);
}
.rt-pat-chapa {
  background-color: var(--rt-steel);
  background-image: radial-gradient(circle at center, rgba(0, 0, 0, .35) 1.6px, transparent 1.7px);
  background-size: 12px 12px;
}

/* ============================================================
   2. BOTÃO MOSQUETÃO  v3 — perfil D assimétrico (não oval)
   Estados: idle → .is-loading → .is-ok
   ============================================================ */
.rt-mosq {
  --rt-mosq-fill: var(--rt-orange);
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 13px 22px 13px 17px;
  border: 2px solid var(--rt-charcoal);
  border-radius: 4px;
  background: var(--rt-mosq-fill);
  color: var(--rt-charcoal);
  font: 600 15px/1 var(--font-sans, 'Barlow', system-ui, sans-serif);
  letter-spacing: .02em;
  cursor: pointer;
  transition: background 160ms var(--rt-ease), transform 110ms var(--rt-ease);
}
.rt-mosq:hover { background: color-mix(in srgb, var(--rt-mosq-fill) 88%, #000); }
.rt-mosq:active { transform: translateY(1px); }
.rt-mosq[disabled] { cursor: progress; }
.rt-mosq.is-ok { --rt-mosq-fill: var(--green-500, #3F8F4F); color: #fff; }
.rt-mosq__txt { display: block; }

.rt-mosq__svg { display: block; overflow: visible; flex: 0 0 auto; }
.rt-mosq__svg * { fill: none; stroke: currentColor; stroke-linejoin: round; }

/* corpo: espinha reta + curvas de topo e base (D assimétrico) */
.rt-mosq__corpo { stroke-width: 2.6; stroke-linecap: round; }
/* nariz e batente */
.rt-mosq__nariz { stroke-width: 2; opacity: .55; }
/* gatilho: articulado no pino inferior, abre para fora */
.rt-mosq__gate {
  stroke-width: 2.4;
  stroke-linecap: round;
  transform-box: fill-box;
  transform-origin: 100% 100%;
  transform: rotate(14deg);
  transition: transform 300ms var(--rt-ease);
}
.rt-mosq:hover .rt-mosq__gate { transform: rotate(6deg); }
.rt-mosq.is-loading .rt-mosq__gate,
.rt-mosq.is-ok .rt-mosq__gate { transform: rotate(0deg); }

/* luva de rosca: sobe e gira travando */
.rt-mosq__sleeve {
  stroke-width: 4.6;
  stroke-linecap: butt;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transform: translateY(-3px) rotate(-90deg);
  transition: opacity 140ms var(--rt-ease) 160ms, transform 320ms var(--rt-snap) 160ms;
}
.rt-mosq.is-loading .rt-mosq__sleeve,
.rt-mosq.is-ok .rt-mosq__sleeve { opacity: 1; transform: none; }

.rt-mosq__pino { stroke-width: 3.2; stroke-linecap: round; opacity: .5; }

.rt-mosq__spin { opacity: 0; stroke-dasharray: 13 42; stroke-width: 2; }
.rt-mosq.is-loading .rt-mosq__spin {
  opacity: .8;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: rt-spin .8s linear infinite;
}
@keyframes rt-spin { to { transform: rotate(360deg); } }

.rt-mosq.is-ok .rt-mosq__svg { animation: rt-clack 260ms var(--rt-ease); }
@keyframes rt-clack {
  0% { transform: translateX(0); }
  35% { transform: translateX(1.5px) rotate(1.4deg); }
  100% { transform: translateX(0); }
}

.rt-mosq__check {
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset 240ms var(--rt-ease) 240ms;
}
.rt-mosq.is-ok .rt-mosq__check { stroke-dashoffset: 0; }
.rt-mosq.is-ok .rt-mosq__corpo,
.rt-mosq.is-ok .rt-mosq__gate,
.rt-mosq.is-ok .rt-mosq__nariz,
.rt-mosq.is-ok .rt-mosq__pino { opacity: .28; }

@media (prefers-reduced-motion: reduce) {
  .rt-mosq__gate, .rt-mosq__sleeve, .rt-mosq__check { transition-duration: 1ms; }
  .rt-mosq.is-ok .rt-mosq__svg { animation: none; }
  .rt-mosq.is-loading .rt-mosq__spin { animation-duration: 2.4s; }
}

/* ============================================================
   3. SELOS DE NORMA
   ============================================================ */
.rt-selos { display: flex; flex-wrap: wrap; gap: 12px; }
.rt-selo {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0 10px;
  padding: 8px 14px 8px 10px;
  border: 2px solid currentColor;
  border-radius: 3px;
  color: var(--rt-charcoal);
  position: relative;
}
.rt-selo::before {
  content: '';
  position: absolute;
  inset: auto auto 0 0;
  width: 100%; height: 3px;
  background-image: repeating-linear-gradient(45deg,
      currentColor 0 5px, transparent 5px 10px);
  opacity: .55;
}
.rt-selo > b {
  grid-row: 1 / span 2;
  font: 700 26px/.9 var(--font-display, 'Barlow Condensed', sans-serif);
  text-transform: uppercase;
}
.rt-selo > i {
  font: 500 12px/1 var(--font-mono, 'IBM Plex Mono', monospace);
  letter-spacing: .1em;
  font-style: normal;
}
.rt-selo > em {
  font: 500 10px/1.2 var(--font-sans, 'Barlow', sans-serif);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-style: normal;
  opacity: .7;
}
.rt-selo--orange { color: var(--rt-orange); }
.rt-selo--luz { color: #fff; }
.rt-selo--solido { background: var(--rt-charcoal); color: #fff; border-color: var(--rt-charcoal); }
.rt-selo--solido > b { color: var(--rt-orange); }

/* ============================================================
   4. LOADERS  v3 — 4 variantes (JS: ropetec-ui.js)
   ============================================================ */
.rt-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-content: center;
  background: var(--rt-charcoal);
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px;
  transition: opacity 420ms var(--rt-ease), visibility 420ms;
}
.rt-loader.is-off { opacity: 0; visibility: hidden; }
.rt-loader::before,
.rt-loader::after {
  content: '';
  position: absolute; left: 0; right: 0;
  height: 6px;
  background-image: repeating-linear-gradient(45deg,
      var(--rt-orange) 0 14px, var(--rt-charcoal) 14px 28px);
}
.rt-loader::before { top: 0; }
.rt-loader::after { bottom: 0; }

.rt-loader__marca {
  font: 700 20px/1 var(--font-display, 'Barlow Condensed', sans-serif);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: #fff;
}
.rt-loader__nota {
  font: 500 10px/1 var(--font-mono, 'IBM Plex Mono', monospace);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .42);
}
.rt-loader__barra {
  position: relative;
  width: 100%; height: 3px;
  background: rgba(255, 255, 255, .12);
  overflow: hidden;
}
.rt-loader__barra > i {
  position: absolute; inset: 0 auto 0 0;
  width: 0;
  background: var(--rt-orange);
}

/* ---- 4A · ALPINISTA: silhueta desce a corda ---- */
.rt-ldA { grid-template-columns: auto auto; align-items: center; gap: 34px; }
.rt-ldA__cena {
  position: relative;
  width: 132px; height: 268px;
  border-left: 1px solid rgba(255, 255, 255, .1);
}
.rt-ldA__parede {
  position: absolute; inset: 0 auto 0 0;
  width: 46px;
  background-image: repeating-linear-gradient(to bottom,
      rgba(255, 255, 255, .11) 0 2px, transparent 2px 24px);
  border-right: 3px solid rgba(255, 255, 255, .22);
}
.rt-ldA__corda {
  position: absolute; left: 62px; top: 0;
  width: 3px; height: 100%;
  background: linear-gradient(to bottom, var(--rt-orange) 0 40%, rgba(255, 255, 255, .14) 40%);
  background-size: 100% 250%;
  animation: rt-ldA-corda 1.9s var(--rt-ease) infinite;
}
@keyframes rt-ldA-corda {
  0% { background-position: 0 -120%; }
  65%, 100% { background-position: 0 0; }
}
.rt-ldA__ancora {
  position: absolute; left: 44px; top: 0;
  width: 38px; height: 6px;
  background: var(--rt-orange);
}
.rt-ldA__homem {
  position: absolute; left: 18px; top: 0;
  width: 88px; height: 88px;
  color: var(--rt-orange);
  animation: rt-ldA-desce 1.9s var(--rt-ease) infinite;
}
.rt-ldA__homem svg { display: block; width: 100%; height: 100%; }
@keyframes rt-ldA-desce {
  0% { transform: translateY(6px); }
  22% { transform: translateY(6px); }
  46% { transform: translateY(88px); }
  56% { transform: translateY(88px); }
  80% { transform: translateY(178px); }
  100% { transform: translateY(178px); }
}
.rt-ldA__corpo { display: grid; gap: 14px; justify-items: start; width: 210px; }
.rt-ldA__cota {
  font: 700 54px/.85 var(--font-display, 'Barlow Condensed', sans-serif);
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.rt-ldA__cota small {
  font: 500 13px/1 var(--font-mono, 'IBM Plex Mono', monospace);
  letter-spacing: .16em;
  color: var(--rt-orange);
  margin-left: 8px;
}

/* ---- 4B · DESCIDA: mosquetão desce a corda ---- */
.rt-ldB { grid-template-columns: auto auto; align-items: center; gap: 30px; }
.rt-ldB__trilho { position: relative; width: 46px; height: 250px; }
.rt-ldB__trilho::before {
  content: '';
  position: absolute; left: 21px; top: 0; bottom: 0;
  width: 3px;
  background: rgba(255, 255, 255, .14);
}
.rt-ldB__topo {
  position: absolute; left: 8px; top: 0;
  width: 30px; height: 5px;
  background: var(--rt-orange);
}
.rt-ldB__mosq {
  position: absolute; left: 8px; top: 0;
  color: var(--rt-orange);
  animation: rt-ldB-desce 1.7s var(--rt-ease) infinite;
}
.rt-ldB__mosq svg { display: block; }
@keyframes rt-ldB-desce {
  0% { transform: translateY(4px); }
  68% { transform: translateY(206px); }
  100% { transform: translateY(206px); }
}
.rt-ldB__corpo { display: grid; gap: 14px; justify-items: start; width: 220px; }

/* ---- 4C · COTA: contador 00→60 M ---- */
.rt-ldC { gap: 20px; justify-items: center; }
.rt-ldC__num {
  display: flex; align-items: baseline; gap: 10px;
  color: #fff;
  font: 700 116px/.82 var(--font-display, 'Barlow Condensed', sans-serif);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.rt-ldC__num small {
  font: 500 16px/1 var(--font-mono, 'IBM Plex Mono', monospace);
  letter-spacing: .16em;
  color: var(--rt-orange);
}
.rt-ldC__regua {
  position: relative;
  width: 320px; height: 26px;
  border-top: 1px solid rgba(255, 255, 255, .22);
}
.rt-ldC__regua i { position: absolute; top: 0; width: 1px; height: 6px; background: rgba(255, 255, 255, .26); }
.rt-ldC__regua i.is-maior { height: 13px; background: rgba(255, 255, 255, .5); }
.rt-ldC__cursor {
  position: absolute; top: -1px; left: 0;
  width: 2px; height: 26px;
  background: var(--rt-orange);
}

/* ---- 4D · PERSIANA: fitas de isolamento fecham ---- */
.rt-ldD { justify-items: center; }
.rt-ldD__cena {
  position: relative;
  width: 380px; height: 172px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .022);
}
.rt-ldD__fita {
  position: absolute; left: 0; right: 0;
  height: 24px;
  background-image: repeating-linear-gradient(45deg,
      var(--rt-hazard) 0 14px, var(--rt-charcoal) 14px 28px);
  transform-origin: left center;
  animation: rt-ldD-fita 1.9s var(--rt-ease) infinite;
}
.rt-ldD__fita--a { top: 18px; }
.rt-ldD__fita--b { bottom: 18px; transform-origin: right center; animation-delay: .26s; }
@keyframes rt-ldD-fita {
  0% { transform: scaleX(0); }
  50% { transform: scaleX(1); }
  100% { transform: scaleX(1); }
}
.rt-ldD__miolo { position: relative; display: grid; gap: 10px; justify-items: center; }

/* ============================================================
   5. ANIMAÇÕES DE SCROLL  v3  (JS: ropetec-scroll.js)
   Todas revelam com .is-in e podem ser reproduzidas de novo por
   RopeTecScroll.reproduzir(el) — sem recarregar a página.
   ============================================================ */

/* ---- 5.1 Fita hazard: cap de seção que desenrola ---- */
.rt-fita {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 44px;
  padding: 0 16px;
  background: var(--rt-charcoal);
  overflow: hidden;
  clip-path: inset(0 0 0 0);
}
.rt-fita::before,
.rt-fita::after {
  content: '';
  position: absolute; left: 0; right: 0;
  height: 7px;
  background-image: repeating-linear-gradient(45deg,
      var(--rt-hazard) 0 12px, var(--rt-charcoal) 12px 24px);
}
.rt-fita::before { top: 0; }
.rt-fita::after { bottom: 0; }
.rt-fita__rot {
  position: relative;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font: 600 11px/1 var(--font-mono, 'IBM Plex Mono', monospace);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}
.rt-fita__nota {
  position: relative;
  flex: 0 0 auto;
  font: 500 11px/1 var(--font-mono, 'IBM Plex Mono', monospace);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rt-hazard);
  white-space: nowrap;
  margin-left: auto;
  padding-left: 10px;
}
.rt-fita.rt-arm { clip-path: inset(0 100% 0 0); }
.rt-fita.rt-arm.is-in { clip-path: inset(0 0 0 0); transition: clip-path 820ms var(--rt-ease); }
.rt-fita--orange::before,
.rt-fita--orange::after {
  background-image: repeating-linear-gradient(45deg,
      var(--rt-orange) 0 12px, var(--rt-charcoal) 12px 24px);
}
.rt-fita--orange .rt-fita__nota { color: var(--rt-orange); }

/* ---- 5.2 Linha de vida: cabo tensiona e o trava-quedas corre ---- */
.rt-linha { display: block; max-width: 100%; overflow: visible; }
.rt-linha__cabo {
  fill: none;
  stroke: var(--rt-orange);
  stroke-width: 2.6;
  stroke-linecap: round;
}
.rt-linha__cabo--fino { stroke: rgba(255, 255, 255, .3); stroke-width: 1.2; }
.rt-linha__placa { fill: var(--rt-charcoal); stroke: var(--rt-orange); stroke-width: 2.2; }
.rt-linha__furo { fill: var(--rt-orange); stroke: none; }
.rt-linha__carro { fill: var(--rt-orange); stroke: none; }
.rt-linha__cota {
  fill: rgba(255, 255, 255, .5);
  stroke: none;
  font: 500 7px/1 var(--font-mono, 'IBM Plex Mono', monospace);
  letter-spacing: .12em;
}
.rt-linha.rt-arm .rt-linha__cabo { stroke-dasharray: 4000; stroke-dashoffset: 4000; }
.rt-linha.rt-arm .rt-linha__grupo { transform: translateY(6px); }
.rt-linha.rt-arm .rt-linha__carro { opacity: 0; }
.rt-linha.rt-arm .rt-linha__placa,
.rt-linha.rt-arm .rt-linha__furo,
.rt-linha.rt-arm .rt-linha__cota { opacity: 0; }
.rt-linha.rt-arm.is-in .rt-linha__cabo {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 660ms var(--rt-ease);
}
.rt-linha.rt-arm.is-in .rt-linha__grupo {
  transform: translateY(0);
  transition: transform 520ms var(--rt-snap) 420ms;
}
.rt-linha.rt-arm.is-in .rt-linha__placa,
.rt-linha.rt-arm.is-in .rt-linha__furo,
.rt-linha.rt-arm.is-in .rt-linha__cota {
  opacity: 1;
  transition: opacity 300ms var(--rt-ease) 240ms;
}
.rt-linha.rt-arm.is-in .rt-linha__carro {
  opacity: 1;
  transition: opacity 200ms 720ms;
  animation: rt-linha-corre 1600ms var(--rt-ease) 760ms both;
}
@keyframes rt-linha-corre {
  0% { transform: translateX(0); }
  100% { transform: translateX(var(--rt-vao, 200px)); }
}

/* ---- 5.3 Trena de cota: desenrola medindo ---- */
.rt-trena {
  position: relative;
  height: 92px;
  background: rgba(255, 255, 255, .028);
  border: 1px solid rgba(255, 255, 255, .12);
  overflow: hidden;
}
.rt-trena__fita {
  position: absolute; left: 0; top: 48px;
  height: 24px; width: 100%;
  background: var(--rt-orange);
  transform-origin: left center;
}
.rt-trena__fita::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(to right, rgba(24, 24, 26, .8) 0 1px, transparent 1px 10px),
    repeating-linear-gradient(to right, rgba(24, 24, 26, .85) 0 1.8px, transparent 1.8px 50px);
  background-size: 100% 38%, 100% 74%;
  background-repeat: no-repeat, no-repeat;
  background-position: 0 100%, 0 100%;
}
.rt-trena__gancho {
  position: absolute; left: 0; top: 42px;
  width: 9px; height: 36px;
  background: var(--rt-charcoal);
  border: 2px solid var(--rt-orange);
  z-index: 2;
}
.rt-trena__num {
  position: absolute; left: 18px; top: 10px;
  display: flex; align-items: baseline; gap: 8px;
  color: #fff;
  font: 700 34px/.85 var(--font-display, 'Barlow Condensed', sans-serif);
  font-variant-numeric: tabular-nums;
  z-index: 2;
}
.rt-trena__num small {
  font: 500 11px/1 var(--font-mono, 'IBM Plex Mono', monospace);
  letter-spacing: .16em;
  color: var(--rt-orange);
}
.rt-trena__rot {
  position: absolute; right: 16px; top: 18px;
  font: 500 9px/1 var(--font-mono, 'IBM Plex Mono', monospace);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
  z-index: 2;
}
.rt-trena.rt-arm .rt-trena__fita { transform: scaleX(0); }
.rt-trena.rt-arm .rt-trena__num { opacity: 0; }
.rt-trena.rt-arm.is-in .rt-trena__fita {
  transform: scaleX(1);
  transition: transform 1500ms var(--rt-ease);
}
.rt-trena.rt-arm.is-in .rt-trena__num { opacity: 1; transition: opacity 240ms; }

/* ---- 5.4 Selo de norma: bate e trava ---- */
.rt-bate {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  background: rgba(255, 255, 255, .028);
  border: 1px solid rgba(255, 255, 255, .12);
}
.rt-bate__selo {
  position: relative;
  flex: 0 0 auto;
  width: 86px; height: 86px;
  display: grid;
  place-content: center;
  gap: 2px;
  border: 3px solid var(--rt-orange);
  border-radius: 50%;
  color: #fff;
  text-align: center;
}
.rt-bate__selo b {
  font: 700 15px/1 var(--font-display, 'Barlow Condensed', sans-serif);
  letter-spacing: .1em;
}
.rt-bate__selo i {
  font: 500 15px/1 var(--font-mono, 'IBM Plex Mono', monospace);
  font-style: normal;
  color: var(--rt-orange);
}
.rt-bate__anel {
  position: absolute; inset: -3px;
  border: 2px solid var(--rt-orange);
  border-radius: 50%;
  opacity: 0;
}
.rt-bate__txt {
  font: 500 12px/1.5 var(--font-mono, 'IBM Plex Mono', monospace);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}
.rt-bate__txt b { display: block; color: #fff; }
.rt-bate.rt-arm .rt-bate__selo { opacity: 0; transform: scale(2.6) rotate(-14deg); }
.rt-bate.rt-arm .rt-bate__txt { opacity: 0; }
.rt-bate.rt-arm.is-in .rt-bate__selo {
  opacity: 1;
  transform: none;
  transition: opacity 160ms var(--rt-ease), transform 380ms var(--rt-snap);
}
.rt-bate.rt-arm.is-in .rt-bate__anel { animation: rt-bate-onda 620ms var(--rt-ease) 340ms; }
.rt-bate.rt-arm.is-in .rt-bate__txt { opacity: 1; transition: opacity 300ms 420ms; }
@keyframes rt-bate-onda {
  0% { opacity: .9; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.55); }
}

/* ---- 5.5 Fita de cota lateral 0–60 m (fixa) ---- */
.rt-cota {
  position: fixed;
  right: 22px; top: 0; bottom: 0;
  width: 62px;
  z-index: 4;
  pointer-events: none;
  display: grid;
  align-content: center;
  justify-items: end;
  gap: 10px;
  font: 500 10px/1 var(--font-mono, 'IBM Plex Mono', monospace);
  letter-spacing: .14em;
  color: rgba(255, 255, 255, .5);
}
.rt-cota__trilho {
  position: relative;
  width: 100%; height: 46vh;
  border-right: 1px solid rgba(255, 255, 255, .22);
  overflow: hidden;
}
.rt-cota__fita { position: absolute; inset: 0; will-change: transform; }
.rt-cota__marca {
  position: absolute; right: 0;
  display: flex; align-items: center; gap: 6px;
  transform: translateY(-50%);
}
.rt-cota__marca i { display: block; height: 1px; background: rgba(255, 255, 255, .3); width: 8px; }
.rt-cota__marca.is-maior i { width: 18px; background: var(--rt-orange); }
.rt-cota__marca span { opacity: 0; }
.rt-cota__marca.is-maior span { opacity: 1; }
.rt-cota__cursor {
  position: absolute; right: 0; top: 50%;
  transform: translateY(-50%);
  display: flex; align-items: center; gap: 6px;
  color: var(--rt-orange);
  font-weight: 600;
}
.rt-cota__cursor i { width: 26px; height: 2px; background: var(--rt-orange); display: block; }
.rt-cota--claro { color: rgba(24, 24, 26, .55); }
.rt-cota--claro .rt-cota__trilho { border-color: rgba(24, 24, 26, .2); }
@media (max-width: 1180px) { .rt-cota { display: none; } }

/* ============================================================
   6. PLANTA 3D — marcadores e painel
   O botão tem o TAMANHO DO PONTO; o rótulo é absoluto ao lado,
   então o ponto fica exatamente na coordenada projetada.
   ============================================================ */
.rt3d {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: var(--rt-charcoal);
}
@media (max-width: 900px) { .rt3d { grid-template-columns: 1fr; } }
.rt3d__palco { position: relative; min-height: 520px; }
.rt3d__palco canvas { display: block; }
.rt3d__barra { position: absolute; left: 14px; bottom: 14px; display: flex; gap: 8px; z-index: 3000; }
.rt3d__btn {
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(24, 24, 26, .82);
  color: #fff;
  font: 500 10px/1 var(--font-mono, 'IBM Plex Mono', monospace);
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 2px;
}
.rt3d__btn:hover { border-color: var(--rt-orange); color: var(--rt-orange); }
.rt3d__btn.is-on { border-color: var(--rt-orange); color: var(--rt-orange); }

.rt3d-marcador {
  position: absolute; top: 0; left: 0;
  width: 14px; height: 14px;
  padding: 0; margin: 0;
  border: 0; background: none;
  cursor: pointer;
  transition: opacity 160ms linear;
}
.rt3d-marcador__ponto {
  display: block;
  width: 14px; height: 14px;
  border: 2px solid var(--rt-orange);
  border-radius: 50%;
  background: rgba(24, 24, 26, .8);
  box-shadow: 0 0 0 0 rgba(245, 142, 17, .5);
  transition: box-shadow 220ms var(--rt-ease), background 160ms;
}
.rt3d-marcador:hover .rt3d-marcador__ponto,
.rt3d-marcador.is-on .rt3d-marcador__ponto {
  background: var(--rt-orange);
  box-shadow: 0 0 0 7px rgba(245, 142, 17, .18);
}
.rt3d-marcador.is-atras { opacity: .28; }
.rt3d-marcador__rot {
  position: absolute;
  left: 21px; top: 50%;
  transform: translateY(-50%) translateX(-4px);
  display: block;
  font: 500 10px/1 var(--font-mono, 'IBM Plex Mono', monospace);
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
  padding: 5px 8px;
  background: rgba(24, 24, 26, .86);
  border-left: 2px solid var(--rt-orange);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms, transform 180ms var(--rt-ease);
}
.rt3d-marcador:hover .rt3d-marcador__rot,
.rt3d-marcador.is-on .rt3d-marcador__rot { opacity: 1; transform: translateY(-50%); }
.rt3d-marcador__rot b { color: var(--rt-orange); }

.rt3d__painel { padding: 26px 24px; border-left: 1px solid rgba(255, 255, 255, .14); color: #fff; }
.rt3d-painel__cota {
  margin: 0 0 10px;
  font: 500 10px/1 var(--font-mono, 'IBM Plex Mono', monospace);
  letter-spacing: .2em;
  color: var(--rt-orange);
}
.rt3d-painel__tit {
  margin: 0 0 6px;
  font: 700 30px/1 var(--font-display, 'Barlow Condensed', sans-serif);
  text-transform: uppercase;
  letter-spacing: -.01em;
}
.rt3d-painel__svc {
  margin: 0 0 14px;
  font: 600 12px/1.3 var(--font-sans, 'Barlow', sans-serif);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}
.rt3d-painel__txt {
  margin: 0;
  font: 400 14px/1.55 var(--font-sans, 'Barlow', sans-serif);
  color: rgba(255, 255, 255, .8);
}

/* ============================================================
   7. DIAGRAMA DO MÉTODO  v3
   Ilustrações com massa sólida + acento laranja (não só linhas).
   ============================================================ */
.rt-metodo {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--rt-charcoal);
  border: 1px solid rgba(255, 255, 255, .14);
}
@media (max-width: 900px) { .rt-metodo { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .rt-metodo { grid-template-columns: 1fr; } }

.rt-etapa {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  padding: 24px 22px 26px;
  outline: 1px solid rgba(255, 255, 255, .1);
  outline-offset: -.5px;
  color: #fff;
  transition: background 200ms var(--rt-ease);
}
.rt-etapa:hover { background: rgba(255, 255, 255, .028); }
.rt-etapa__cab { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.rt-etapa__num {
  font: 700 34px/.8 var(--font-display, 'Barlow Condensed', sans-serif);
  color: var(--rt-orange);
  letter-spacing: -.02em;
}
.rt-etapa__rot {
  font: 500 9px/1.3 var(--font-mono, 'IBM Plex Mono', monospace);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .42);
}
.rt-etapa__fig {
  height: 104px;
  margin-bottom: 20px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .07);
}
.rt-etapa__fig svg { display: block; width: 100%; height: 100%; }
.rt-etapa__tit {
  margin: 0 0 10px;
  font: 700 23px/1.02 var(--font-display, 'Barlow Condensed', sans-serif);
  text-transform: uppercase;
  letter-spacing: -.005em;
}
.rt-etapa__txt {
  margin: 0;
  font: 400 13.5px/1.55 var(--font-sans, 'Barlow', sans-serif);
  color: rgba(255, 255, 255, .68);
  text-wrap: pretty;
}
.rt-etapa__liga {
  position: absolute;
  top: 38px; right: -5px;
  width: 10px; height: 10px;
  border: 2px solid var(--rt-orange);
  border-radius: 50%;
  background: var(--rt-charcoal);
  z-index: 2;
}
.rt-metodo > .rt-etapa:last-child .rt-etapa__liga { display: none; }
@media (max-width: 900px) { .rt-etapa__liga { display: none; } }

.rt-etapa.rt-arm { opacity: 0; transform: translateY(14px); }
.rt-etapa.rt-arm.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 520ms var(--rt-ease), transform 520ms var(--rt-ease);
}

/* massas e acentos das ilustrações */
.rt-fig__massa { fill: rgba(255, 255, 255, .16); stroke: none; }
.rt-fig__massa--forte { fill: rgba(255, 255, 255, .3); stroke: none; }
.rt-fig__massa--laranja { fill: var(--rt-orange); stroke: none; }
.rt-fig__linha { fill: none; stroke: rgba(255, 255, 255, .5); stroke-width: 1.6; stroke-linecap: round; }
.rt-fig__linha--acento { stroke: var(--rt-orange); stroke-width: 2; }
.rt-fig__pontilhado { fill: none; stroke: var(--rt-orange); stroke-width: 1.4; stroke-dasharray: 3 4; }
.rt-fig__chao { fill: none; stroke: rgba(255, 255, 255, .28); stroke-width: 1.4; }