/* Estilos só da reconstrução (não existem no capturado): botão travado, régua
   interativa, carrossel e barra da tela de carregamento.
   Usa as mesmas variáveis de tema do original. */

/* ---- botão "Continuar" travado até ter seleção válida ---- */
button.btn.recon-locked { cursor: not-allowed; }  /* o apagado vem do opacity-75 do contêiner, como na Inlead */

/* ---- régua interativa (altura / peso) ---- */
.recon-ruler { position: relative; }
.recon-ruler-value {
  display: block; text-align: center; pointer-events: none;
  font-weight: 600; font-size: 2.25rem; line-height: 1;
  color: var(--theme-heading-color, #030712);
  margin: .25rem 0 .5rem;
}
.recon-ruler-value small { font-size: 1.25rem; }
.recon-ruler-trackwrap { position: relative; }
.recon-ruler-track {
  overflow-x: scroll; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-bottom: 1px solid var(--theme-background-contrast-4, #c1c1c1);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  cursor: grab;
}
.recon-ruler-track::-webkit-scrollbar { display: none; }
.recon-ruler-track:active { cursor: grabbing; }
.recon-ruler-strip { display: flex; align-items: flex-start; padding: 1rem 50% 2rem; width: max-content; }
.recon-ruler-tick {
  scroll-snap-align: center;
  flex: 0 0 12px; width: 12px;
  display: flex; flex-direction: column; align-items: center; position: relative;
}
.recon-ruler-tick::before {
  content: ""; width: 1px; height: 16px;
  background: var(--theme-background-contrast-4, #c1c1c1);
}
.recon-ruler-tick.t5::before  { height: 22px; }
.recon-ruler-tick.t10::before { height: 40px; }
.recon-ruler-tick b {
  font-weight: 400; font-size: .95rem; margin-top: .5rem;
  color: var(--theme-background-contrast-7, #5b5b5b); white-space: nowrap;
}
.recon-ruler-pointer {
  position: absolute; left: 50%; top: .5rem; bottom: 0;
  width: 2px; transform: translateX(-50%);
  background: var(--theme-accent-color, #14b8a6);
  pointer-events: none;
}
.recon-ruler-pointer::after {          /* triângulo ▲ apontando pra cima, na base */
  content: ""; position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 8px solid transparent; border-right: 8px solid transparent;
  border-bottom: 11px solid var(--theme-accent-color, #14b8a6);
}

/* ---- tela de carregamento: carrossel de depoimentos ---- */
.recon-carousel { overflow: hidden; }
.recon-carousel .swiper-wrapper {
  display: flex !important;
  transition: transform .5s ease;
}
.recon-carousel .swiper-slide {
  flex: 0 0 88% !important;
  max-width: 88% !important;
  margin-right: 8px;
}