/* ============================================================
   ROPE TEC — ajuste de ritmo das animações de scroll
   Carregado DEPOIS de ropetec-graphics.css. O arquivo do kit fica
   intacto: tudo aqui é sobreposição, e apagar este arquivo devolve
   o comportamento original.

   POR QUE ISTO EXISTE
   As peças disparavam cedo demais e terminavam rápido demais.
   A fita, por exemplo, é um elemento de 44px que dispara quando 40%
   dele aparece — ou seja, com 18px assomando no rodapé da tela — e
   completava em 820ms. Quando o olho chegava nela, já tinha acabado.

   O QUE MUDA
   1. Atraso na largada, para o elemento estar de fato na tela.
   2. Duração maior, para o movimento ser legível.
   3. Escalonamento: as partes chegam em sequência, não juntas.
   ============================================================ */


/* ------------------------------------------------------------
   FITA HAZARD — divisória de seção
   ------------------------------------------------------------ */

/* Mais presença: 44px era fino demais para um divisor de seção. */
.rt-fita {
  height: 64px;
  padding-inline: 24px;
}

.rt-fita::before,
.rt-fita::after {
  height: 9px;
  background-size: 34px 34px;
}

/* A cortina abre em 1,4s, começando 260ms depois de a faixa entrar —
   tempo de o olho chegar nela. */
.rt-fita.rt-arm.is-in {
  transition: clip-path 1400ms cubic-bezier(.16, .84, .28, 1) 260ms;
}

/* As listras correm enquanto a cortina abre. Sem isso o movimento é
   só uma borda invisível varrendo um padrão repetido — o olho não
   tem em que se segurar. As duas faixas correm em sentidos opostos. */
.rt-fita.rt-arm.is-in::before {
  animation: rt-fita-corre-dir 1660ms cubic-bezier(.16, .84, .28, 1) 260ms both;
}
.rt-fita.rt-arm.is-in::after {
  animation: rt-fita-corre-esq 1660ms cubic-bezier(.16, .84, .28, 1) 260ms both;
}
@keyframes rt-fita-corre-dir {
  from { background-position-x: -102px; }
  to   { background-position-x: 0; }
}
@keyframes rt-fita-corre-esq {
  from { background-position-x: 102px; }
  to   { background-position-x: 0; }
}

/* O rótulo e a nota entram depois que a cortina passou por eles. */
.rt-fita.rt-arm .rt-fita__rot,
.rt-fita.rt-arm .rt-fita__nota {
  opacity: 0;
  transform: translateY(7px);
}
.rt-fita.rt-arm.is-in .rt-fita__rot {
  opacity: 1;
  transform: none;
  transition: opacity 460ms var(--rt-ease) 900ms,
              transform 460ms var(--rt-ease) 900ms;
}
.rt-fita.rt-arm.is-in .rt-fita__nota {
  opacity: 1;
  transform: none;
  transition: opacity 460ms var(--rt-ease) 1120ms,
              transform 460ms var(--rt-ease) 1120ms;
}


/* ------------------------------------------------------------
   TRENA DE COTA
   A fita já desenrolava em 1,5s, mas o número aparecia junto com o
   início do movimento — então ele contava sozinho, sem relação com
   a fita. Agora ele entra quando a fita já andou um bom trecho.
   ------------------------------------------------------------ */
.rt-trena.rt-arm.is-in .rt-trena__fita {
  transition: transform 1800ms cubic-bezier(.16, .84, .28, 1) 200ms;
}
.rt-trena.rt-arm .rt-trena__num { transform: translateY(8px); }
.rt-trena.rt-arm.is-in .rt-trena__num {
  transform: none;
  transition: opacity 420ms var(--rt-ease) 620ms,
              transform 420ms var(--rt-ease) 620ms;
}
.rt-trena.rt-arm .rt-trena__rot { opacity: 0; }
.rt-trena.rt-arm.is-in .rt-trena__rot {
  opacity: 1;
  transition: opacity 500ms var(--rt-ease) 1500ms;
}


/* ------------------------------------------------------------
   SELO DE NORMA
   Este é para ser rápido — é um carimbo batendo, e carimbo bate.
   Só ganha um atraso na largada para não bater fora de quadro.
   ------------------------------------------------------------ */
.rt-bate.rt-arm.is-in .rt-bate__selo {
  transition: opacity 200ms var(--rt-ease) 320ms,
              transform 460ms var(--rt-snap) 320ms;
}
.rt-bate.rt-arm.is-in .rt-bate__anel {
  animation: rt-bate-onda 720ms var(--rt-ease) 700ms;
}
.rt-bate.rt-arm.is-in .rt-bate__txt {
  transition: opacity 340ms 820ms;
}


/* ------------------------------------------------------------
   ETAPAS DO MÉTODO
   As quatro subiam ao mesmo tempo, o que lê como um bloco só.
   Escalonadas, lê-se como sequência — que é o que elas são.
   ------------------------------------------------------------ */
.rt-etapa.rt-arm { transform: translateY(20px); }
.rt-etapa.rt-arm.is-in {
  transition: opacity 620ms var(--rt-ease), transform 620ms var(--rt-ease);
}
.rt-metodo .rt-etapa:nth-child(1).rt-arm.is-in { transition-delay: 0ms; }
.rt-metodo .rt-etapa:nth-child(2).rt-arm.is-in { transition-delay: 150ms; }
.rt-metodo .rt-etapa:nth-child(3).rt-arm.is-in { transition-delay: 300ms; }
.rt-metodo .rt-etapa:nth-child(4).rt-arm.is-in { transition-delay: 450ms; }

/* A linha que liga uma etapa à seguinte cresce junto com a entrada. */
.rt-metodo .rt-etapa.rt-arm .rt-etapa__liga { transform: scaleX(0); transform-origin: left center; }
.rt-metodo .rt-etapa.rt-arm.is-in .rt-etapa__liga {
  transform: scaleX(1);
  transition: transform 700ms var(--rt-ease) 500ms;
}


/* ------------------------------------------------------------
   MOVIMENTO REDUZIDO
   Quem pediu para o sistema não animar não recebe nada disto.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .rt-fita.rt-arm.is-in,
  .rt-fita.rt-arm.is-in::before,
  .rt-fita.rt-arm.is-in::after,
  .rt-fita.rt-arm.is-in .rt-fita__rot,
  .rt-fita.rt-arm.is-in .rt-fita__nota,
  .rt-trena.rt-arm.is-in .rt-trena__fita,
  .rt-trena.rt-arm.is-in .rt-trena__num,
  .rt-trena.rt-arm.is-in .rt-trena__rot,
  .rt-bate.rt-arm.is-in .rt-bate__selo,
  .rt-bate.rt-arm.is-in .rt-bate__txt,
  .rt-metodo .rt-etapa.rt-arm.is-in,
  .rt-metodo .rt-etapa.rt-arm.is-in .rt-etapa__liga {
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    animation: none !important;
  }
}


/* ------------------------------------------------------------
   SELO DE NORMA EM FUNDO CLARO
   O selo do kit é desenhado para fundo escuro: fundo branco a 2,8%,
   borda branca a 12% e texto branco. Em seção clara isso some.
   Esta variante troca só as cores e mantém o resto igual.
   Aplique com class="rt-bate--luz" no mesmo elemento do .rt-bate,
   ou deixe o data-rt-selo-anim dentro de um contêiner .rt-luz.
   ------------------------------------------------------------ */
.rt-luz .rt-bate,
.rt-bate--luz {
  background: var(--surface-card, #fff);
  border-color: var(--border-default, #D3D1CC);
}
.rt-luz .rt-bate__selo,
.rt-bate--luz .rt-bate__selo { color: var(--text-strong, #18181A); }

.rt-luz .rt-bate__txt,
.rt-bate--luz .rt-bate__txt { color: var(--text-body, #3E3D39); }


/* ------------------------------------------------------------
   MARCA DO MOSQUETÃO
   Só o desenho, sem botão: serve de marca de seção. É preenchido
   por ropetec-init.js com RopeTecMosquetao.svg().
   ------------------------------------------------------------ */
.rt-marca-mosq {
  display: block;
  margin-bottom: 18px;
  color: var(--orange-500, #F26F1F);
  line-height: 0;
}
.rt-marca-mosq svg { display: block; }
.section.dark .rt-marca-mosq,
.section.darker .rt-marca-mosq { color: var(--orange-400, #F4842F); }


/* ============================================================
   FITA HAZARD — agora presa à rolagem
   ------------------------------------------------------------
   O gatilho de "entrou na tela" não servia: a faixa tem 64px e
   disparava com 40% dela visível, ou seja, com 26px assomando no
   rodapé. A animação corria e terminava antes de o olho chegar.
   Aumentar a duração não resolveu — só empurrou o problema.

   Agora a abertura é função da posição da faixa na tela: quem
   controla o movimento é a rolagem do visitante. É impossível
   perder o efeito, porque ele acontece enquanto você rola.
   O valor 0..1 vem de ropetec-init.js na variável --rt-fita-p.
   ============================================================ */
.rt-fita--scroll {
  clip-path: inset(0 calc((1 - var(--rt-fita-p, 0)) * 100%) 0 0) !important;
  transition: none !important;
}
.rt-fita--scroll::before,
.rt-fita--scroll::after { animation: none !important; }

/* Rótulo e nota aparecem no último terço da abertura. */
.rt-fita--scroll .rt-fita__rot,
.rt-fita--scroll .rt-fita__nota {
  opacity: calc((var(--rt-fita-p, 0) - .62) * 3.4) !important;
  transform: none !important;
  transition: none !important;
}


/* ============================================================
   FITA DE COTA — lado esquerdo, contraste corrigido
   ------------------------------------------------------------
   Três problemas relatados:
   1. ficava do lado direito, brigando com o botão do WhatsApp;
   2. em seção clara sumia — a cor era branco a 50%, fixa;
   3. ao chegar no fim, o número do cursor caía exatamente sobre a
      marca "60 M" da régua e os dois apareciam sobrepostos.

   Aqui: passa para a esquerda, os números da régua saem (fica só
   o traço; o número quem dá é o cursor) e a cor deixa de ser fixa
   — ropetec-init.js alterna .rt-cota--claro conforme a seção que
   estiver atrás dela.
   ============================================================ */
.rt-cota {
  left: 22px;
  right: auto;
  justify-items: start;
  transition: color 220ms ease;
}
.rt-cota__trilho {
  height: 58vh;
  border-right: 0;
  border-left: 1px solid rgba(255, 255, 255, .22);
}
.rt-cota__marca {
  right: auto;
  left: 0;
  flex-direction: row-reverse;
  justify-content: flex-end;
}
.rt-cota__cursor {
  right: auto;
  left: 0;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

/* A régua não numera mais: o número é do cursor. Assim os dois
   nunca aparecem sobrepostos no fim da página. */
.rt-cota__marca.is-maior span { opacity: 0; }

/* Sobre fundo claro */
.rt-cota--claro { color: rgba(24, 24, 26, .62); }
.rt-cota--claro .rt-cota__trilho { border-left-color: rgba(24, 24, 26, .18); }
.rt-cota--claro .rt-cota__marca i { background: rgba(24, 24, 26, .28); }
.rt-cota--claro .rt-cota__marca.is-maior i,
.rt-cota--claro .rt-cota__cursor,
.rt-cota--claro .rt-cota__cursor i { background: var(--orange-700, #B04810); }
.rt-cota--claro .rt-cota__cursor { background: none; color: var(--orange-700, #B04810); }


/* ============================================================
   FITA DE COTA — maior, agora que o site encolheu
   ------------------------------------------------------------
   Com a escala do design system em 90%, a régua ficou pequena
   demais em relação ao resto. Aqui ela cresce: a pista passa de
   58vh para 74vh (ocupa quase toda a altura da tela, em vez de
   só a faixa central) e os números sobem um ponto.
   ============================================================ */
.rt-cota {
  width: 74px;
  font-size: 11px;
  letter-spacing: .12em;
}
.rt-cota__trilho { height: 74vh; }
.rt-cota__marca.is-maior i { width: 22px; }
.rt-cota__marca i { width: 10px; }
.rt-cota__cursor { font-size: 13px; }
.rt-cota__cursor i { width: 32px; height: 2px; }

/* Abaixo de 1180px a fita some (regra do kit). Entre 1180 e 1400
   a tela é estreita: a régua volta ao tamanho anterior para não
   roubar espaço do conteúdo. */
@media (max-width: 1400px) {
  .rt-cota { width: 62px; font-size: 10px; }
  .rt-cota__trilho { height: 62vh; }
}