/* ==========================================================================
   AVYSTA · parceria SIECON
   ========================================================================== */

/* ------------------------------------------------- controle do Raio-X */

input[type="range"].rx {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  outline: none;
  margin: 0;
  cursor: pointer;
  background: linear-gradient(90deg, #F49A4A 18%, rgba(255, 255, 255, .14) 18%);
}

input[type="range"].rx::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 5px solid #0F141B;
  box-shadow: 0 0 0 2px #F49A4A, 0 0 20px rgba(244,154,74, .45);
}

input[type="range"].rx::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 5px solid #0F141B;
  box-shadow: 0 0 0 2px #F49A4A;
}

input[type="range"].rx:focus-visible {
  outline: 2px solid #F49A4A;
  outline-offset: 6px;
}

/* Alvo de toque maior no celular, sem mudar o desenho da régua */
@media (pointer: coarse) {
  input[type="range"].rx { height: 8px; }
  input[type="range"].rx::-webkit-slider-thumb { width: 30px; height: 30px; border-width: 7px; }
  input[type="range"].rx::-moz-range-thumb { width: 16px; height: 16px; border-width: 7px; }
}

/* ------------------------------------------------------------- herói */

/* O título é composto em linha única no desktop; abaixo disso ele quebra. */
@media (max-width: 1100px) {
  .rh1 { white-space: normal !important; }
}

/* ---------------------------------------------------------- miniaturas */

[data-on^="openR"] { transition: border-color .25s ease; }
[data-on^="openR"]:hover { border-color: rgba(11, 11, 12, .3) !important; }
[data-on^="openR"]:hover img { transform: scale(1.03); }