/* "Como posso ajudar" v6: medidores lúdicos dentro dos cartões do mural (ajuda-medidor.js).
   Tudo é desenhado em CSS e responde a --v (0 a 1), o valor que a pessoa escolhe no controle. */
.mc-6{--cor:#ffe6d2}
.mural-aviso{margin:clamp(28px,4vw,44px) auto 0;max-width:40ch;text-align:center;font:600 14.5px/1.5 var(--font-body);color:rgba(29,20,36,.62)}
.mural-card > .md{order:2}
.mural-card .ps-row,.mural-card .ps{display:none}

.md{--v:.5;--ink:var(--aj-ink,#1d1424);display:flex;flex-direction:column;gap:12px;margin:4px 0 2px}
.md-q{margin:0;font:700 clamp(1rem,1.3vw,1.1rem)/1.35 var(--font-headline);color:var(--ink);letter-spacing:-.01em}
.md-vis{position:relative;height:clamp(150px,15vw,176px);border-radius:16px;background:rgba(255,255,255,.5);box-shadow:inset 0 0 0 1px rgba(29,20,36,.08);
  display:flex;align-items:center;justify-content:center;gap:26px;overflow:hidden}

/* controle deslizante */
.md-ctrl{display:flex;flex-direction:column;gap:6px}
.md input[type=range]{--v:.5;-webkit-appearance:none;appearance:none;width:100%;height:28px;margin:0;background:none;cursor:pointer}
.md input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:99px;background:linear-gradient(90deg,var(--ink) calc(var(--v) * 100%),rgba(29,20,36,.15) 0)}
.md input[type=range]::-moz-range-track{height:8px;border-radius:99px;background:rgba(29,20,36,.15)}
.md input[type=range]::-moz-range-progress{height:8px;border-radius:99px;background:var(--ink)}
.md input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-10px;border-radius:50%;background:#f59e0b;border:4px solid #fff;box-shadow:0 4px 12px rgba(29,20,36,.3)}
.md input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#f59e0b;border:4px solid #fff;box-shadow:0 4px 12px rgba(29,20,36,.3)}
.md input[type=range]:focus-visible{outline:none}
.md input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(82,17,128,.45)}
.md input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px rgba(82,17,128,.45)}
.md:not(.is-tocado) input[type=range]::-webkit-slider-thumb{animation:mdChama 2.4s ease-in-out infinite}   /* convida a mexer, devagar */
@keyframes mdChama{0%,100%{box-shadow:0 4px 12px rgba(29,20,36,.3),0 0 0 0 rgba(245,158,11,.45)}50%{box-shadow:0 4px 12px rgba(29,20,36,.3),0 0 0 10px rgba(245,158,11,0)}}
.md-ends > span{display:block;margin:0;padding:0;line-height:1.2}
.md-ends{display:flex;align-items:flex-start;justify-content:space-between;font:600 12.5px var(--font-body);color:rgba(29,20,36,.6)}
.md-r{margin:0;min-height:2.9em;font:700 15.5px/1.4 var(--font-body);color:#4a1a6e}
.md-r.is-in{animation:mdFrase .6s cubic-bezier(.2,.7,.2,1)}
@keyframes mdFrase{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.md-dica{font-weight:600;color:rgba(29,20,36,.5)}

/* bateria */
.md-bat{position:relative;width:min(190px,62%);height:84px;border:4px solid var(--ink);border-radius:16px}
.md-bat::after{content:'';position:absolute;right:-14px;top:50%;width:8px;height:30px;margin-top:-15px;border-radius:0 6px 6px 0;background:var(--ink)}
.md-bat-in{position:absolute;left:6px;top:6px;bottom:6px;width:calc((100% - 12px) * var(--v));border-radius:9px;
  background:color-mix(in srgb,#c9533f,#e9b04a calc(var(--v) * 100%));transition:width .25s ease,background .25s ease}
.md-bat-raio{display:none}

/* termômetro + pensamento acelerado */
.md-termo{position:relative;width:46px;height:132px;display:flex;flex-direction:column;align-items:center}
.md-termo-tubo{position:relative;width:24px;flex:1;border:3px solid var(--ink);border-bottom:0;border-radius:14px 14px 0 0;overflow:hidden;background:#fff}
.md-termo-tubo i{position:absolute;left:3px;right:3px;bottom:0;height:calc(8% + var(--v) * 88%);border-radius:8px 8px 0 0;background:color-mix(in srgb,#8aa6d8,#d9583f calc(var(--v) * 100%));transition:height .25s ease,background .25s ease}
.md-termo-bulbo{width:46px;height:46px;margin-top:-6px;border-radius:50%;border:3px solid var(--ink);background:color-mix(in srgb,#8aa6d8,#d9583f calc(var(--v) * 100%));transition:background .25s ease}
.md-onda{width:min(170px,45%);height:70px;overflow:visible}
.md-onda path{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke;transform-origin:50% 50%;
  transform:scaleY(calc(.08 + var(--v) * 1.1));transition:transform .3s ease;stroke-dasharray:14 8;animation:mdOnda calc(3.4s - var(--v) * 2.6s) linear infinite}
@keyframes mdOnda{to{stroke-dashoffset:-44}}

/* régua: a barra é o que você fez; a bandeira é onde a régua está */
.md-regua{position:relative;width:84%;height:14px;border-radius:99px;background:rgba(29,20,36,.12);margin-top:30px}
.md-regua-feito{position:absolute;left:0;top:0;bottom:0;width:56%;border-radius:99px;background:#f59e0b}
.md-regua-flag{position:absolute;bottom:0;left:calc(34% + var(--v) * 62%);width:3px;height:64px;background:var(--ink);transition:left .3s cubic-bezier(.2,.7,.2,1)}
.md-regua-flag::after{content:'';position:absolute;left:3px;top:0;width:28px;height:20px;background:#521180;clip-path:polygon(0 0,100% 50%,0 100%)}
.md-regua-voce{position:absolute;left:56%;top:22px;transform:translateX(-50%);font:700 12px var(--font-body);color:rgba(29,20,36,.65)}

/* copo */
.md-copo{position:relative;width:100px;height:116px;background:var(--ink);clip-path:polygon(0 0,100% 0,86% 100%,14% 100%)}
.md-copo::before{content:'';position:absolute;inset:0 4px 4px;background:#fffaf2;clip-path:polygon(0 0,100% 0,86.5% 100%,13.5% 100%)}
.md-copo-agua{position:absolute;left:4px;right:4px;bottom:4px;height:calc(4% + var(--v) * 84%);background:#9fc9e6;clip-path:polygon(0 0,100% 0,86.5% 100%,13.5% 100%);transition:height .3s ease}
.md-copo-agua svg{position:absolute;left:0;top:-10px;width:200%;height:12px;fill:#9fc9e6;animation:mdAgua 3s linear infinite}
@keyframes mdAgua{to{transform:translateX(-50%)}}

/* distância entre você e quem você ama */
.md-elo{position:relative;width:100%;height:100%}
.md-elo-a,.md-elo-b{position:absolute;top:50%;width:58px;height:58px;margin-top:-29px;border-radius:50%;border:3px solid var(--ink);background:#fff;transition:left .3s ease,right .3s ease}
.md-elo-a,.md-elo-b{overflow:hidden;background-image:radial-gradient(circle at 50% 38%,var(--ink) 0 8px,transparent 8.5px),radial-gradient(ellipse 17px 12px at 50% 96%,var(--ink) 0 98%,transparent)}
.md-elo-a{left:calc(50% - 64px - (1 - var(--v)) * 30%)}
.md-elo-b{right:calc(50% - 64px - (1 - var(--v)) * 30%);background-color:#f3e8ff}
.md-elo-l{position:absolute;top:50%;height:3px;margin-top:-1.5px;left:calc(50% - 6px - (1 - var(--v)) * 30%);right:calc(50% - 6px - (1 - var(--v)) * 30%);
  background:repeating-linear-gradient(90deg,var(--ink) 0 8px,transparent 8px 14px);opacity:calc(.25 + var(--v) * .6);transition:left .3s ease,right .3s ease}
.md-elo-c{position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:#f59e0b;transform:scale(calc(var(--v) * var(--v) * 1.3));transition:transform .3s ease}

/* abas abertas */
.md-abas{display:flex;align-items:flex-end;gap:4px;width:88%;height:60%;border-bottom:3px solid var(--ink)}
.md-abas span{flex:1;max-width:90px;height:40px;border:2px solid rgba(29,20,36,.55);border-bottom:0;border-radius:10px 10px 0 0;background:#fff;animation:mdAba .35s cubic-bezier(.2,.8,.2,1.2) backwards}
.md-abas span:nth-child(3n+2){background:#f3e8ff}.md-abas span:nth-child(3n){background:#fde7c4}
.md-abas span:last-child{border-color:var(--ink);height:46px}
@keyframes mdAba{from{transform:translateY(16px) scale(.8);opacity:0}}

/* ritmo: os pontos andam juntos; o seu vai à frente */
.md-ritmo{position:relative;display:flex;align-items:center;gap:14px;transform:translateX(calc(var(--v) * -40px));transition:transform .3s ease}
.md-ritmo i{width:16px;height:16px;border-radius:50%;background:rgba(29,20,36,.45);animation:mdPasso 1.6s ease-in-out infinite}
.md-ritmo i:nth-child(2){animation-delay:.12s}.md-ritmo i:nth-child(3){animation-delay:.24s}.md-ritmo i:nth-child(4){animation-delay:.36s}.md-ritmo i:nth-child(5){animation-delay:.48s}.md-ritmo i:nth-child(6){animation-delay:.6s}
.md-ritmo b{width:22px;height:22px;border-radius:50%;background:#f59e0b;box-shadow:0 0 0 5px rgba(245,158,11,.22);
  transform:translateX(calc(var(--v) * 96px));transition:transform .3s ease;animation:mdPassoB calc(1.6s - var(--v) * .9s) ease-in-out infinite}
@keyframes mdPasso{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes mdPassoB{0%,100%{translate:0 0}50%{translate:0 -12px}}

@media (max-width:760px){
  .md-vis{height:150px;gap:18px}
  .md-r{font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  .md *,.md *::before,.md *::after,.md input[type=range]::-webkit-slider-thumb{animation:none !important;transition:none !important}
}