/* ============ simulador de correntes e taliscas (v3) ============ */
.sim-sec{overflow:hidden}
.sim-cab{max-width:780px;margin-bottom:clamp(26px,3.4vw,44px)}
.sim-cab .lead{margin-top:14px;color:rgba(255,255,255,.74)}
.sim-grade{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(22px,3vw,44px);align-items:start}
.sim-vis{position:sticky;top:96px;min-width:0}

/* palco 3D: a esteira anda devagar; as taliscas sobem e descem nas pontas, como no tambor */
.sim-palco{position:relative;height:clamp(320px,36vw,470px);border-radius:var(--raio-g);overflow:hidden;perspective:1700px;perspective-origin:50% 28%;
  background:radial-gradient(70% 60% at 50% 42%,rgba(238,46,52,.16),transparent 70%),radial-gradient(120% 90% at 50% 0%,#1f2732,#0b0f15 75%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 30px 60px -36px rgba(0,0,0,.8)}
.sim-cena{position:absolute;left:50%;top:50%;transform-style:preserve-3d;transform-origin:50% 50% 0;transition:transform .9s var(--ease)}
.sim-cena i,.sim-cena div{position:absolute;left:0;top:0;display:block;transform-origin:0 0}
.sim-cena div{transform-style:preserve-3d}
.sim-a{animation:simAnda 20s linear infinite}
.sim-palco.parado .sim-a{animation-play-state:paused}
.sim-chao{border-radius:10px;background:linear-gradient(90deg,rgba(0,0,0,.35),transparent 12%,transparent 88%,rgba(0,0,0,.35)),linear-gradient(180deg,#2a313b,#161b22);box-shadow:inset 0 0 0 2px rgba(255,255,255,.05)}
.sim-parede{height:18px;border-radius:3px;background:linear-gradient(180deg,#e0353c,#8f1218)}
.sim-topo{background-color:#b9bfc6}
.sim-lado{background:linear-gradient(180deg,#8f969e,#5c626a)}
.sim-lado-b{background:linear-gradient(180deg,#737a82,#43484f)}
.sim-camada{background:#8b929a}
.sim-camada2{background:#5a6068}
/* borracha que cobre a esteira inteira: trechos encostados, um por talisca; a cada 3 taliscas a linha de parafusos de fixacao */
.sim-borr{background:linear-gradient(180deg,#4a5059,#353a41 18%,#2b2f35 50%,#353a41 82%,#24272c);box-shadow:inset 0 2px 0 rgba(255,255,255,.16),inset 0 -2px 0 rgba(0,0,0,.45)}
.sim-tal-borr .sim-topo{background-image:none!important;background-color:#30353b}
.sim-tal-borr .sim-lado{background:#1d2024}
/* .sim-paraf: os 5 parafusos de cada linha vem no estilo do trecho (simulador.js) */
/* volta no tambor: a borracha some antes de descer e volta depois de subir, no mesmo relogio do passo (sem degrau na ponta).
   Elos e taliscas somem sob o piso; a opacidade nao vai neles (pesa no celular) nem no passo inteiro (achataria o 3D). */
/* @keyframes simFade: gerado no simulador.js junto com o simAnda (depende do comprimento da esteira) */
.sim-fd{animation:simFade 20s linear infinite}
.sim-palco.parado .sim-fd{animation-play-state:paused}
.sim-u,.sim-u-c{width:66px;height:36px;background:var(--sim-elo) 0 0/100% 100% no-repeat}
.sim-u-meio{background-image:var(--sim-elo-meio)}
.sim-u-base{background-image:var(--sim-elo-base)}
.sim-u::after{content:"";position:absolute;inset:0;background:var(--sim-elo-v) 0 0/100% 100% no-repeat;opacity:0}
.sim-pl{height:9px;border-radius:4px;background:linear-gradient(180deg,#cdd2d7,#7b828a)}
.sim-rol{width:11px;height:18px;border-radius:5.5px;background:linear-gradient(90deg,#24282d,#737a82 45%,#24282d)}
/* destaque da parte que a etapa pergunta: tinta vermelha da Forx pulsando, numa camada por cima da peca (a peca guarda a animacao do tambor) */
@keyframes simPulsoU{0%,100%{opacity:0}50%{opacity:.9}}
.sim-pl::after,.sim-rol::after,.sim-borr::after,.sim-topo::after{content:"";position:absolute;inset:0;border-radius:inherit;background:rgba(238,46,52,.66);opacity:0}
.sim-palco[data-foco="elo"] .sim-pl::after,.sim-palco[data-foco="elo"] .sim-rol::after,.sim-palco[data-foco="modelo"] .sim-pl::after,.sim-palco[data-foco="modelo"] .sim-rol::after,
.sim-palco[data-foco="borracha"] .sim-borr::after,.sim-palco[data-foco="talisca"] .sim-topo::after,
.sim-palco[data-foco="elo"] .sim-u::after,.sim-palco[data-foco="modelo"] .sim-u::after{animation:simPulsoU 1.8s ease-in-out infinite}
.sim-palco.parado .sim-cena i::after{animation-play-state:paused}

.sim-leg{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin-top:14px;min-height:1.6em;font-size:.9rem;font-weight:600;color:#fff}
.sim-leg span{display:inline-flex;align-items:center;white-space:nowrap}
.sim-leg span::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--verm-logo);margin-right:8px}
.sim-leg .sim-leg-vazia{white-space:normal}
.sim-leg .sim-leg-vazia::before{display:none}
.sim-leg .sim-leg-vazia{font-weight:500;color:rgba(255,255,255,.6)}
/* aviso ilustrativo: branco e legivel (pedido do cliente) */
.sim-ilus{margin-top:10px;font-size:.95rem;font-weight:500;line-height:1.5;color:#fff}

/* painel das etapas */
.sim-painel{min-width:0;padding:clamp(20px,2.4vw,30px);border-radius:var(--raio-g);background:#fff;color:var(--tinta);box-shadow:0 30px 60px -32px rgba(0,0,0,.7)}
.sim-prog{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-bottom:20px}
.sim-pg{display:grid;align-content:start;gap:7px;min-width:0;min-height:30px;padding:0;border:0;background:none;color:var(--tinta-2);font-size:.72rem;font-weight:600;text-align:left;cursor:pointer}
.sim-pg i{display:block;height:5px;border-radius:3px;background:#e2e4e8;transition:background .3s}
.sim-pg span{white-space:nowrap;overflow:hidden}
.sim-prog.curto .sim-pg span{display:none}
.sim-prog.curto .sim-pg{align-content:center}
.sim-pg.ok i{background:var(--tinta)}
.sim-pg.on{color:var(--tinta)}
.sim-pg.on i{background:var(--verm)}
.sim-pg:disabled{cursor:default;opacity:.5}
.sim-t{font-family:var(--fd);font-weight:760;font-size:clamp(1.22rem,1.7vw,1.48rem);line-height:1.2}
.sim-ops{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px}
.sim-op{position:relative;display:grid;align-content:start;gap:4px;min-width:0;padding:12px 12px 14px;border-radius:14px;border:0;background:var(--off);color:var(--tinta);text-align:left;cursor:pointer;
  box-shadow:inset 0 0 0 1.4px rgba(13,17,23,.1);transition:box-shadow .2s,background .2s,transform .2s}
.sim-op:hover{box-shadow:inset 0 0 0 1.4px rgba(13,17,23,.36)}
.sim-op:active{transform:scale(.98)}
.sim-op.on{background:#fff;box-shadow:inset 0 0 0 2px var(--verm),0 12px 26px -16px rgba(222,31,40,.55)}
.sim-op .des{width:100%;max-width:210px;height:auto;max-height:122px;aspect-ratio:12/7;margin-bottom:6px;color:#646b74}
.sim-op.on .des{color:var(--tinta)}
.sim-op b{font-family:var(--fd);font-stretch:108%;font-size:1rem;line-height:1.2}
.sim-op span{font-size:.8rem;line-height:1.4;color:var(--tinta-2)}
.sim-ok{position:absolute;top:9px;right:9px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--verm);color:#fff;transform:scale(0);transition:transform .25s var(--ease)}
.sim-op.on .sim-ok{transform:scale(1)}
.sim-ok svg{width:14px;height:14px}
.sim-nav{display:flex;align-items:center;gap:10px;margin-top:22px}
.sim-nav .btn{min-height:48px}
.sim-segue{margin-left:auto}
.sim-painel .btn-o{background:#fff;color:var(--tinta);box-shadow:inset 0 0 0 1.5px rgba(13,17,23,.22)}
.sim-painel .btn-o:hover{box-shadow:inset 0 0 0 1.5px var(--tinta)}

/* medidas */
.sim-esq{margin:14px 0 0;padding:10px 12px;border-radius:14px;background:var(--off);color:#5a616a}
.sim-esq svg{width:100%;height:auto;aspect-ratio:320/150;max-width:420px;margin:0 auto}
.sim-un{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:16px 0 14px}
.sim-un>span{font-size:.84rem;font-weight:600;margin-right:4px}
.sim-painel .chip{min-height:38px;min-width:48px;justify-content:center;background:#fff;color:var(--tinta);box-shadow:inset 0 0 0 1.3px rgba(13,17,23,.16)}
.sim-painel .chip.on{background:var(--noite);color:#fff;box-shadow:inset 0 0 0 1.3px var(--noite)}
.sim-campos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.sim-campos .field:last-child{grid-column:1/-1}
.sim-painel .field label{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px}
.sim-painel .field label i{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px;background:var(--noite);color:#fff;font:700 .72rem/1 var(--fm);font-style:normal}
.sim-painel .field label small,.sim-cotas b small{font-weight:500;font-size:.78rem;color:var(--tinta-2)}
.sim-in{position:relative;min-width:0}
.sim-in input{padding-right:46px}
.sim-uni{position:absolute;right:12px;top:50%;transform:translateY(-50%);font:600 .8rem/1 var(--fm);font-style:normal;color:var(--tinta-2);pointer-events:none}
.sim-cotas{margin-top:18px}
.sim-cotas>b{display:flex;align-items:center;gap:8px;font-size:.84rem}
.sim-cota{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 44px;gap:8px;margin-top:8px}
.sim-cota input,.sim-dados .sim-qtd input{width:100%;min-height:48px;padding:10px 14px;border-radius:10px;border:0;background:var(--off);font-size:16px;box-shadow:inset 0 0 0 1.4px rgba(13,17,23,.1);outline:none;transition:box-shadow .2s,background .2s}
.sim-cota .sim-in input{padding-right:42px}
.sim-cota input:focus,.sim-dados .sim-qtd input:focus{background:#fff;box-shadow:inset 0 0 0 2px var(--verm)}
.sim-x{display:grid;place-items:center;min-height:48px;border-radius:10px;border:0;background:var(--off);color:var(--tinta-2);cursor:pointer}
.sim-x:hover{color:var(--verm)}
.sim-x svg{width:18px;height:18px}
.sim-add{display:inline-flex;align-items:center;gap:6px;min-height:40px;margin-top:8px}
.sim-add svg{width:16px;height:16px}
.sim-dica{margin-top:12px;font-size:.82rem;line-height:1.5;color:var(--tinta-2)}

/* dados do pedido */
.sim-dados{display:grid;gap:16px;margin-top:16px}
.sim-qtd{display:grid;grid-template-columns:48px minmax(0,1fr) 48px;gap:8px;max-width:260px}
.sim-qtd input{text-align:center;font-family:var(--fm);font-weight:600}
.sim-qb{display:grid;place-items:center;min-height:48px;border-radius:10px;border:0;background:var(--noite);color:#fff;cursor:pointer}
.sim-qb svg{width:18px;height:18px}
.sim-bloco>b{display:block;font-size:.84rem;margin-bottom:8px}
.sim-fotos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.sim-fo{display:flex;align-items:center;gap:10px;min-width:0;min-height:52px;padding:10px 12px;border-radius:12px;border:0;background:var(--off);color:var(--tinta);font-size:.88rem;font-weight:600;line-height:1.3;text-align:left;cursor:pointer;box-shadow:inset 0 0 0 1.4px rgba(13,17,23,.1)}
.sim-fo i{flex:none;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px rgba(13,17,23,.3)}
.sim-fo.on{background:#fff;box-shadow:inset 0 0 0 2px var(--verm)}
.sim-fo.on i{box-shadow:inset 0 0 0 6px var(--verm)}
.sim-bloco.erro .sim-fo{box-shadow:inset 0 0 0 2px #c0392b}
.sim-ciente{position:relative;display:flex;align-items:flex-start;gap:12px;padding:14px;border-radius:12px;background:var(--off);font-size:.9rem;font-weight:600;line-height:1.45;cursor:pointer}
.sim-ciente input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.sim-cx{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:7px;background:#fff;color:transparent;box-shadow:inset 0 0 0 2px rgba(13,17,23,.3);transition:background .2s}
.sim-cx svg{width:16px;height:16px}
.sim-ciente input:checked+.sim-cx{background:var(--verm);color:#fff;box-shadow:none}
.sim-ciente input:focus-visible+.sim-cx{outline:2px solid var(--verm);outline-offset:2px}
.sim-ciente.erro{box-shadow:inset 0 0 0 2px #c0392b}
#simCienteErr:empty{display:none}

/* resumo */
.sim-res{display:grid;gap:12px;margin-top:16px}
.sim-rb{padding:14px 16px;border-radius:14px;background:var(--off)}
.sim-rb header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.sim-rb header b{font-family:var(--fd);font-stretch:108%;font-size:1.02rem}
.sim-rb header .link{min-height:32px}
.sim-rb dl{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:6px 14px;margin:0;font-size:.88rem}
.sim-rb dt{color:var(--tinta-2)}
.sim-rb dd{margin:0;font-weight:600;overflow-wrap:anywhere;white-space:pre-line}
.sim-ok-txt{display:flex;gap:8px;align-items:flex-start;margin-top:10px;font-size:.82rem;color:var(--tinta-2)}
.sim-ok-txt svg{flex:none;width:16px;height:16px;margin-top:2px;color:var(--zap)}
.sim-envia{width:100%}
.sim-res .sim-dica{margin-top:0;text-align:center}
.sim-zera{justify-self:center;min-height:36px}
.sim-enviado{display:flex;gap:12px;align-items:flex-start;margin-top:16px;padding:14px 16px;border-radius:14px;background:#e7f6ed;color:#11592f}
.sim-enviado>svg{flex:none;width:22px;height:22px;margin-top:1px}
.sim-enviado b{display:block}
.sim-enviado span{font-size:.84rem}

/* celular e tablet: a pr\0000e9 via e as etapas no mesmo cart\0000e3 o branco */
@media (max-width:899px){
  .sim-grade{grid-template-columns:minmax(0,1fr);gap:0;padding:12px;border-radius:var(--raio-g);background:#fff;box-shadow:0 30px 60px -32px rgba(0,0,0,.7)}
  .sim-vis{position:static}
  .sim-palco{height:clamp(210px,56vw,360px)}
  .sim-leg{color:var(--tinta);padding:0 4px}
  .sim-leg .sim-leg-vazia{color:var(--tinta-2)}
  .sim-ilus{margin-top:12px;padding:12px 14px;border-radius:12px;background:var(--noite);color:#fff;font-size:.9rem}
  .sim-painel{padding:18px 4px 6px;background:none;box-shadow:none}
}
@media (max-width:899px) and (max-height:500px){.sim-palco{height:210px}}
@media (min-width:640px) and (max-width:899px){.sim-ops-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:560px){
  .sim-pg span{display:none}
  .sim-pg{align-content:center}
  .sim-fotos{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:420px){
  .sim-campos{grid-template-columns:minmax(0,1fr)}
  .sim-cota{grid-template-columns:minmax(0,1fr) 44px;grid-template-areas:"n n" "v x"}
  .sim-cota .sim-cn{grid-area:n}
  .sim-cota .sim-in{grid-area:v}
  .sim-cota .sim-x{grid-area:x}
  .sim-cota+.sim-cota{margin-top:14px}
}
@media (max-width:400px){
  .sim-nav .btn{padding:0 15px}
  .sim-op{padding:10px 10px 12px}
  .sim-campos{gap:10px}
}