.elementor-5777 .elementor-element.elementor-element-5542cefa{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;}.elementor-5777 .elementor-element.elementor-element-75e14411{--display:flex;--min-height:0px;}@media(min-width:768px){.elementor-5777 .elementor-element.elementor-element-5542cefa{--content-width:1340px;}.elementor-5777 .elementor-element.elementor-element-75e14411{--width:100%;}}/* Start custom CSS for html, class: .elementor-element-b0c3643 *//* FONTES */
@font-face {
  font-family: "Arian LT";
  src: url("https://example.com/fonts/arianlt.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root{
  --text: #ffffff;
  --label: rgba(255,255,255,.60);
  --glass: rgba(150,210,250,.05);
  --glass-border: rgba(255,255,255,.1);
  --panel-bg: rgba(0,0,0,.25);
  /* Slider */
  --slider-track: linear-gradient(90deg, #1c2026 0%, #2a313a 100%);
  --slider-fill: linear-gradient(90deg, #0f00 0%, #2b3444 100%);
  --slider-thumb: #fff;
  --slider-thumb-shadow: 0 4px 12px rgba(0,0,0,.35);
}

body{
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
}

/* WRAPPER VIDRO */
.arkham-wrap{
  max-width: 1000px;
  margin: 0 auto;
  padding: 28px;
  border-radius: 18px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
}

/* TÍTULO */
.arkham-title{
  font-family: "Arian LT","Montserrat",serif;
  font-weight: 500;
  text-align:center;
  font-size: clamp(26px, 3.2vw, 34px);
  margin: 0 0 22px;
  color: #fff;
}
.gradient-background-text{
  display:inline-block;
  padding: .08em .35em .15em;
  border-radius: 8px;
  background: linear-gradient(90deg,#6f87aa 0%, #2b3444 100%);
  box-shadow: 0 8px 32px rgba(0,0,0,0);
  color:#fff;
}

/* GRID */
.arkham-grid{
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 24px;
}
@media (max-width:820px){ .arkham-grid{ grid-template-columns:1fr; } }

.panel{
  padding: 20px;
  border-radius: 14px;
  background: var(--panel-bg);
  border: 1px solid rgba(255,255,255,.12);
}

/* SLIDERS */
.input-row{ display:flex; flex-wrap:wrap; gap:15px; margin-bottom:25px; }
.input-group{ flex:1 1 220px; display:flex; flex-direction:column; }

.slider-head{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;
}
label{ font-weight:600; font-size:11px; color: var(--label); }
.slider-value{ font-weight:600; font-size:13px; color:#fff; }

input[type="range"]{
  -webkit-appearance: none;
  width: 100%;
  height: 20px;
  border-radius: 999px;
  background: var(--slider-track);
  outline: none;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

/* Track preenchido (via gradiente sobreposto) */
input[type="range"]::-webkit-slider-runnable-track{
  height: 14px; border-radius: 999px; background: transparent;
}
input[type="range"]::-moz-range-track{
  height: 14px; border-radius: 999px; background: transparent;
}

/* “Fill” usando background-size proporcional via CSS variável (ajustado pelo próprio navegador) */
input[type="range"] {
  background-image: var(--slider-fill);
  background-repeat: no-repeat;
  /* Para Firefox, o fill é tratado pelo ::-moz-range-progress, então forçamos todo track
     a receber o gradiente e o thumb dá a sensação de progresso. */
}

/* Thumb */
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 14px; height: 14px;
  background: var(--slider-thumb);
  border-radius: 50%;
  border: none;
  box-shadow: var(--slider-thumb-shadow);
  cursor: pointer;
  position: relative;
}
input[type="range"]::-moz-range-thumb{
  width: 22px; height: 22px;
  background: var(--slider-thumb);
  border: none; border-radius: 50%;
  box-shadow: var(--slider-thumb-shadow);
  cursor: pointer;
}

/* Glow no foco */
input[type="range"]:focus{
  box-shadow: 0 0 0 3px rgba(255,255,255,.10);
}

/* Marcas escala abaixo do slider */
.slider-scale{
  display:flex; justify-content:space-between;
  font-size: 10px; color: rgba(255,255,255,.55);
  margin-top: 6px; letter-spacing:.2px;
}

/* RESULTADOS */
.results h3{
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}
.result-row{
  display:flex; justify-content:space-between; align-items:center;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(255,255,255,.12);
  font-size: 14px;
}
.result-row:last-child{ border-bottom:none; }
.label{ font-weight:600; color: rgba(255,255,255,.85); }
.value{ font-weight:700; color:#fff; }/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5542cefa */.back2 {
    background: radial-gradient(circle at 20% 20%, #0d0d0d, transparent 40%), 
                radial-gradient(circle at 80% 30%, #000, transparent 40%), 
                radial-gradient(circle at 50% 70%, #000, transparent 40%), 
                radial-gradient(circle at 30% 80%, #000, transparent 40%), 
                radial-gradient(circle at 70% 90%, #63779b, transparent  40%), 
                radial-gradient(circle at 50% 50%, #63779b, transparent 40%);
    background-size: 200% 200%;
    animation: RadialAnimation 25s ease infinite;
}

@keyframes RadialAnimation {
    0% { background-position: 15% 15%; }
    25% { background-position: 85% 15%; }
    50% { background-position: 85% 85%; }
    75% { background-position: 15% 85%; }
    100% { background-position: 15% 15%; }
}/* End custom CSS */