/* Teste de loiro · mesma casa do site da Lilian (nude + dourado-mel + preto de capa + luz do espelho de LED).
   As cores dos tons só aparecem como DADO (amostras). O palco vazio é o espelho redondo do salão dela. */
.pg-sim{background:var(--papel)}
.pg-sim [hidden]{display:none !important}
.pg-sim .topo{color:var(--tinta)}
.pg-sim .topo .logo-topo{background:var(--mel-esc)}
.pg-sim .topo-secao{display:none;opacity:1}
.sim-voltar{gap:8px}
.sim-voltar svg{width:18px;height:18px;transform:scaleX(-1);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (min-width:640px){.pg-sim .topo-secao{display:block}}
@media (max-width:540px){.pg-sim .bt-topo{display:inline-flex;padding:10px 14px}}
@media (max-width:359px){.sim-voltar span{display:none}}

/* botões no escuro (palco) */
.bt-led{background:var(--led);color:var(--tinta);box-shadow:0 0 22px -4px var(--led-glow)}
.bt-led:hover{background:#fff}
.bt-linha-clara{background:transparent;border-color:rgba(255,247,234,.6);color:var(--led)}
.bt-linha-clara:hover{background:var(--led);color:var(--tinta);border-color:var(--led)}
.pg-sim .bt-linha{background:transparent}
.pg-sim .bt-linha:hover{background:var(--tinta)}
.bt .i-zap{fill:none;stroke:currentColor;stroke-width:1.6}

/* ---------- cabeçalho ---------- */
.sim-cab{max-width:1180px;margin:0 auto;padding:calc(var(--topo-h) + 26px) var(--gutter) 20px}
.sim-kicker{font:600 12px/1.3 var(--f-texto);letter-spacing:.18em;text-transform:uppercase;color:var(--mel-esc);margin-bottom:12px}
.sim-titulo{font:400 clamp(2.7rem,12vw,5.2rem)/.98 var(--f-titulo);text-transform:uppercase;letter-spacing:.01em}
.sim-titulo em{font:italic 400 1.1em/1 var(--f-it);text-transform:none;letter-spacing:-.02em;color:var(--mel-esc)}
.sim-sub{margin-top:14px;max-width:36em;color:var(--tinta-2);font-size:16.5px;text-wrap:pretty}
.sim-selo{display:inline-flex;align-items:flex-start;gap:10px;margin-top:18px;padding:12px 16px;border-radius:16px;background:var(--nude);color:var(--tinta);font-size:15px;line-height:1.45;max-width:36em}
.sim-selo svg{width:22px;height:22px;flex:none;fill:none;stroke:var(--mel-esc);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;margin-top:1px}
.sim-selo b{font-weight:700}

/* ---------- grade ---------- */
.sim{padding:8px var(--gutter) 72px}
.sim-grade{max-width:1180px;margin:0 auto;display:grid;gap:22px}
@media (min-width:900px){
  .sim-cab{padding-top:calc(var(--topo-h) + 46px);padding-bottom:30px}
  .sim-grade{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(36px,4.5vw,64px);align-items:start}
  .sim-ctrl{position:sticky;top:calc(var(--topo-h) + 20px)}
}

/* ---------- palco ---------- */
.sim-palco-caixa{min-width:0}
.sim-palco{position:relative;margin:0 auto;width:100%;border-radius:22px;overflow:hidden;background:var(--tinta);color:var(--led);aspect-ratio:var(--ar,4 / 5);max-height:76svh;max-width:calc(76svh * var(--arn,.8));scroll-margin-top:calc(var(--topo-h) + 10px);box-shadow:0 30px 60px -36px rgba(42,36,33,.6);isolation:isolate}
@media (min-width:900px){.sim-palco{max-height:80svh;max-width:calc(80svh * var(--arn,.8))}}

/* vazio: o espelho redondo de LED, aceso */
.sim-vazio{position:absolute;inset:0;isolation:isolate;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:10px;padding:62px 18px 22px;
  background:radial-gradient(60% 42% at 50% 36%,rgba(255,236,200,.13),transparent 72%),linear-gradient(180deg,#2f2825,#1f1a18)}
.sim-espelho{position:absolute;left:50%;top:36%;width:min(84%,440px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;z-index:-1;
  border:3px solid rgba(255,247,234,.9);box-shadow:0 0 16px 2px var(--led-glow),0 0 60px 8px rgba(255,236,200,.22),inset 0 0 18px 2px rgba(255,236,200,.35);opacity:.42}
.sim-vazio > *:not(.sim-espelho){position:relative}
.sim-vazio-tit{font:400 clamp(1.45rem,6vw,2.1rem)/1.05 var(--f-titulo);text-transform:uppercase;color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.4)}
.sim-vazio-bts{display:grid;gap:10px;width:min(100%,300px);margin-top:12px}
.sim-vazio-bts .bt{width:100%}
.sim-cam-erro{max-width:32ch;font-size:14px;color:#ffe2a8;background:rgba(0,0,0,.3);border-radius:12px;padding:10px 14px}
.sim-amostras{margin-top:18px;display:grid;gap:10px;justify-items:center}
.sim-amostras p{font-size:14px;color:rgba(255,247,234,.78)}
.sim-amostras-l{display:flex;gap:12px}
.amostra{width:66px;height:66px;padding:0;border-radius:50%;border:2px solid rgba(255,247,234,.45);overflow:hidden;background:var(--tinta-3);transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
.amostra img{width:100%;height:100%;object-fit:cover}
.amostra:hover{transform:translateY(-3px);border-color:var(--led);box-shadow:0 0 14px 1px var(--led-glow)}
@media (max-height:640px) and (max-width:600px){.sim-amostras{margin-top:10px}.amostra{width:56px;height:56px}}

.sim-dicas{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.sim-dicas li{font-size:13px;line-height:1;color:var(--led);border:1px solid rgba(255,247,234,.35);border-radius:999px;padding:8px 12px;background:rgba(20,16,14,.35)}

/* câmera */
.sim-cam{position:absolute;inset:0;background:#000}
.sim-cam video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.sim-cam-guia{position:absolute;left:50%;top:44%;width:58%;aspect-ratio:3/4;transform:translate(-50%,-50%);border:2px dashed rgba(255,247,234,.6);border-radius:50% 50% 46% 46%;pointer-events:none}
.sim-cam-bts{position:absolute;left:0;right:0;bottom:18px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 22px}
.sim-cam-x{justify-self:start;width:48px;height:48px;border-radius:50%;border:0;background:rgba(20,16,14,.6);display:grid;place-items:center}
.sim-cam-x svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round}
.sim-disparo{width:76px;height:76px;border-radius:50%;border:4px solid var(--led);background:transparent;padding:5px;box-shadow:0 0 16px 2px var(--led-glow)}
.sim-disparo span{display:block;width:100%;height:100%;border-radius:50%;background:var(--led);transition:transform .15s}
.sim-disparo:active span{transform:scale(.88)}

/* antes e depois: o depois embaixo, o antes recortado por cima; a divisória é a luz do espelho, igual ao site */
.sim-cmp{position:absolute;inset:0;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:ew-resize;--p:50%}
.sim-cmp canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.sim-antes-caixa{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.sim-alca{padding:0;cursor:ew-resize;pointer-events:none;appearance:none;-webkit-appearance:none}
.sim-alca:focus-visible{outline:2px solid var(--mel-claro);outline-offset:4px;border-radius:50%}
.sim-rot-d{max-width:calc(62% - 22px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.1em}
@media (max-width:520px){.rot-pre{display:none}.sim-palco[data-estado="cmp"],.sim-palco[data-estado="proc"]{max-height:62svh;max-width:calc(62svh * var(--arn,.8))}}

/* processando: a luz do espelho desce pela foto */
.sim-proc{position:absolute;inset:0;display:grid;place-items:end center;padding-bottom:24px;background:rgba(20,16,14,.3);z-index:6;overflow:hidden}
.sim-scan{position:absolute;left:0;right:0;top:-30%;height:30%;background:linear-gradient(180deg,transparent,rgba(255,247,234,0) 30%,rgba(255,236,200,.36) 92%,rgba(255,247,234,.95) 100%);animation:scan 1.6s cubic-bezier(.5,0,.5,1) infinite;mix-blend-mode:screen}
@keyframes scan{to{top:100%}}
.sim-proc-txt{position:relative;font:600 12px/1 var(--f-texto);letter-spacing:.14em;text-transform:uppercase;color:var(--tinta);background:var(--led);padding:12px 16px;border-radius:999px;box-shadow:0 0 22px -4px var(--led-glow)}

/* status da IA */
.sim-ia{position:absolute;left:50%;top:14px;transform:translateX(-50%);z-index:7;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font:600 11.5px/1 var(--f-texto);letter-spacing:.12em;text-transform:uppercase;color:var(--led);background:rgba(20,16,14,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:9px 13px;border-radius:999px;transition:opacity .5s,transform .5s var(--ease)}
.sim-ia-ponto{width:8px;height:8px;border-radius:50%;background:var(--mel-claro);box-shadow:0 0 10px var(--mel-claro);animation:pisca 1s ease-in-out infinite alternate}
@keyframes pisca{from{opacity:.3}to{opacity:1}}
.sim-ia.pronta .sim-ia-ponto{background:#b9d3a5;box-shadow:0 0 10px #b9d3a5;animation:none}
.sim-ia.erro .sim-ia-ponto{background:#e0846f;box-shadow:none;animation:none}
.sim-ia.erro{white-space:normal;text-align:left;width:max-content;max-width:calc(100% - 28px);line-height:1.35;text-transform:none;letter-spacing:0;font-size:13.5px}
.sim-ia.some{opacity:0;transform:translate(-50%,-8px);pointer-events:none}
.sim-palco[data-estado="cam"] .sim-ia,.sim-palco[data-estado="cmp"] .sim-ia:not(.erro){opacity:0;pointer-events:none}
.sim-palco[data-estado="proc"] .ad-rotulo,.sim-palco[data-estado="proc"] .ad-luz{visibility:hidden}

.sim-priv{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;font-size:14px;font-weight:500;color:var(--tinta-2);text-align:center;text-wrap:pretty}
.sim-priv svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--mel-esc);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ---------- controles ---------- */
.sim-ctrl{background:#fff;border:1px solid rgba(42,36,33,.12);border-radius:22px;padding:22px 18px;box-shadow:0 26px 50px -38px rgba(42,36,33,.45);display:grid;gap:20px;min-width:0}
@media (min-width:900px){.sim-ctrl{padding:28px 26px}}
.sim-tons{border:0;margin:0;padding:0;min-width:0}
.sim-tons legend{font:400 1.7rem/1.1 var(--f-titulo);text-transform:uppercase;margin-bottom:16px;padding:0}
.tons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 6px}
.tom{display:flex;flex-direction:column;align-items:center;gap:8px;padding:4px 0;border:0;background:none;font:600 13px/1.15 var(--f-texto);color:var(--tinta);text-align:center;min-width:0}
.tom-am{position:relative;width:54px;height:54px;border-radius:50%;background:var(--am);box-shadow:inset 0 0 0 1px rgba(42,36,33,.12),0 6px 14px -8px rgba(42,36,33,.5);transition:transform .3s var(--ease)}
.tom-am::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid transparent;transition:border-color .2s,box-shadow .2s}
.tom:hover .tom-am{transform:translateY(-2px)}
.tom[aria-pressed="true"] .tom-am::after{border-color:var(--mel);box-shadow:0 0 12px 1px rgba(217,185,106,.55)}
.tom[aria-pressed="true"]{color:var(--mel-esc);font-weight:700}
.tom-bal{grid-column:span 2;flex-direction:row;justify-content:flex-start;gap:10px;text-align:left;background:var(--nude-2);border-radius:999px;padding:6px 14px 6px 6px;align-self:center}
.tom-bal .tom-am{width:46px;height:46px;flex:none}
.tom-bal[aria-pressed="true"]{background:var(--nude)}
.sim-tons:disabled .tom{cursor:default;opacity:.45}
.sim-tons:disabled .tom:hover .tom-am{transform:none}

.sim-ajustes{display:grid;gap:16px;padding-top:18px;border-top:1px solid rgba(42,36,33,.12)}
.sim-int{display:grid;gap:10px}
.sim-int-cab{display:flex;justify-content:space-between;align-items:baseline;font-weight:600;font-size:15.5px}
.sim-int-cab b{font:700 16px/1 var(--f-texto);font-variant-numeric:tabular-nums;color:var(--mel-esc)}
.sim-int input{-webkit-appearance:none;appearance:none;width:100%;height:34px;background:transparent;cursor:pointer;margin:0}
.sim-int input:disabled{cursor:default;opacity:.45}
.sim-int input::-webkit-slider-runnable-track{height:6px;border-radius:99px;background:linear-gradient(90deg,var(--mel) var(--v,88%),var(--nude) var(--v,88%))}
.sim-int input::-moz-range-track{height:6px;border-radius:99px;background:var(--nude)}
.sim-int input::-moz-range-progress{height:6px;border-radius:99px;background:var(--mel)}
.sim-int input::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-10px;border-radius:50%;background:var(--led);border:2px solid var(--mel);box-shadow:0 0 10px -2px var(--led-glow),0 4px 10px -4px rgba(42,36,33,.5)}
.sim-int input::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--led);border:2px solid var(--mel)}

.sim-raiz{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:14px;cursor:pointer;position:relative}
.sim-raiz input{position:absolute;opacity:0;width:1px;height:1px}
.sim-chave{width:48px;height:28px;border-radius:99px;background:var(--nude);position:relative;transition:background-color .2s;box-shadow:inset 0 0 0 1px rgba(42,36,33,.12)}
.sim-chave::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 6px -2px rgba(42,36,33,.5);transition:transform .3s var(--ease)}
.sim-raiz input:checked + .sim-chave{background:var(--tinta)}
.sim-raiz input:checked + .sim-chave::after{transform:translateX(20px);background:var(--led)}
.sim-raiz input:focus-visible + .sim-chave{outline:2px solid var(--mel);outline-offset:3px}
.sim-raiz input:disabled ~ *{opacity:.45}
.sim-raiz-txt{display:grid;gap:2px}
.sim-raiz-txt b{font-weight:600;font-size:15.5px}
.sim-raiz-txt small{font-size:13.5px;color:var(--tinta-2);line-height:1.3}

.sim-acoes{display:grid;gap:10px;padding-top:18px;border-top:1px solid rgba(42,36,33,.12)}
.sim-acoes .bt{width:100%;padding:12px 14px}
.sim-acoes-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sim-acoes-2 .bt{font-size:14.5px;gap:8px}
.sim-acoes [aria-disabled="true"],.sim-acoes .bt:disabled{opacity:.45;pointer-events:none;box-shadow:none}
.sim-nota{font-size:14px;line-height:1.45;color:var(--tinta);background:var(--nude-2);border:1px solid rgba(184,145,63,.45);border-radius:14px;padding:11px 13px}
.sim-aviso{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--tinta-2);line-height:1.45}
.sim-aviso svg{width:18px;height:18px;flex:none;margin-top:1px;fill:none;stroke:var(--tinta-2);stroke-width:1.7;stroke-linecap:round}

/* ---------- depois do teste ---------- */
.sim-depois-txt{background:var(--nude);padding:clamp(72px,10vw,120px) var(--gutter);text-align:center}
.sim-depois-grade{max-width:760px;margin:0 auto}
.sim-depois-bts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:28px}
.sim-depois-bts .bt svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* perguntas antes de aplicar */
.sim-pergunta{position:absolute;inset:0;z-index:8;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:18px;overflow:auto;background:rgba(31,26,24,.92);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:var(--led);text-align:center}
.sim-perg-txt{font:600 17px/1.35 var(--f-texto)}
.sim-perg-dica{font-size:14px;color:rgba(255,247,234,.8)}
.sim-perg-bts{display:grid;gap:8px;margin-top:6px}
.sim-perg-bts .bt{width:100%}

.pg-sim .rodape-links{gap:6px 22px}
@media (prefers-reduced-motion:reduce){.sim-scan{animation:none;top:35%}}