/* MID GAMES — refinamentos visuais da home */

/* Escolha / Abra / Jogue */
.steps.steps-actions{gap:20px}
.steps-actions .step{position:relative;overflow:hidden;min-height:250px;padding:28px}
.steps-actions .step::after{content:"";position:absolute;width:150px;height:150px;border-radius:50%;right:-72px;top:-72px;background:radial-gradient(circle,rgba(214,168,77,.12),transparent 68%);pointer-events:none}
.step-action-top{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:34px}
.step-action-icon{width:62px;height:62px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(145deg,rgba(241,210,140,.15),rgba(214,168,77,.04));border:1px solid rgba(214,168,77,.24);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 16px 36px rgba(0,0,0,.18)}
.step-action-icon svg{width:31px;height:31px;fill:none;stroke:var(--gold-2);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.steps-actions .step-num{width:auto;height:auto;margin:0;background:transparent;border-radius:0;color:rgba(241,210,140,.5);font-family:Manrope,sans-serif;font-size:.78rem;letter-spacing:.14em}
.steps-actions .step h3{font-size:1.5rem}

/* Fluxo físico: embalagem → chaveiro → celular */
.flow-visual.flow-visual-keychain{min-height:540px}
.flow-visual-keychain .package{left:4px;top:82px;width:210px;height:308px;transform:rotate(-5deg)}
.flow-visual-keychain .package-art{height:174px}
.flow-visual-keychain .tap-phone{right:0;top:52px;width:196px;height:382px;transform:rotate(4deg)}
.flow-visual-keychain .flow-line{left:198px;top:245px;width:238px;transform:none;border-top:1px dashed rgba(214,168,77,.42)}

.keychain-showcase{position:absolute;z-index:8;left:198px;top:146px;width:205px;height:228px;transform:rotate(2deg);filter:drop-shadow(0 28px 36px rgba(0,0,0,.42))}
.keychain-ring{position:absolute;left:78px;top:-36px;width:55px;height:55px;border:6px solid #555b64;border-radius:50%;box-shadow:inset 0 0 0 2px #25282e}
.keychain-link{position:absolute;left:96px;top:8px;width:18px;height:34px;border:4px solid #4c515a;border-radius:10px;background:#15171b}
.keychain-body-new{position:absolute;inset:27px 0 0;border-radius:29px;background:linear-gradient(155deg,#2b2f38,#111318 58%,#0b0c0f);border:1px solid rgba(255,255,255,.15);box-shadow:inset 0 1px 0 rgba(255,255,255,.09);padding:17px;display:flex;flex-direction:column;align-items:center}
.keychain-brand{font-family:Manrope,sans-serif;font-size:.66rem;font-weight:800;letter-spacing:.15em;color:var(--gold-2);margin-bottom:12px}
.keychain-sticker{width:142px;height:128px;border-radius:16px;overflow:hidden;position:relative;border:2px solid rgba(255,255,255,.16);background:#15171c;box-shadow:0 8px 20px rgba(0,0,0,.28)}
.keychain-sticker-art{position:absolute;inset:0;background-image:linear-gradient(180deg,rgba(3,5,8,.02) 30%,rgba(3,5,8,.86) 100%),url('https://images.pexels.com/photos/9545739/pexels-photo-9545739.jpeg?auto=compress&cs=tinysrgb&w=800');background-size:cover;background-position:center 52%}
.keychain-sticker-copy{position:absolute;z-index:2;left:11px;right:10px;bottom:10px;text-shadow:0 2px 8px rgba(0,0,0,.75)}
.keychain-sticker-copy strong{display:block;font-family:Manrope,sans-serif;font-size:.85rem;line-height:1;color:#fff}
.keychain-sticker-copy span{display:block;font-size:.55rem;color:#dedfe3;margin-top:4px;text-transform:uppercase;letter-spacing:.08em}
.keychain-tap{margin-top:10px;font-size:.59rem;font-weight:800;letter-spacing:.16em;color:#aeb1b8}

@media (max-width:980px){
  .flow-visual.flow-visual-keychain{min-height:540px;max-width:650px}
}

@media (max-width:640px){
  .step-action-top{margin-bottom:22px}
  .step-action-icon{width:54px;height:54px;border-radius:16px}
  .step-action-icon svg{width:27px;height:27px}
  .steps-actions .step{padding:22px;min-height:auto}
  .flow-visual.flow-visual-keychain{min-height:455px}
  .flow-visual-keychain .package{left:0;top:74px;width:145px;height:232px;padding:10px}
  .flow-visual-keychain .package-art{height:130px}
  .flow-visual-keychain .tap-phone{right:0;top:42px;width:145px;height:298px}
  .flow-visual-keychain .flow-line{display:block;left:128px;top:224px;width:126px}
  .keychain-showcase{left:112px;top:155px;width:145px;height:172px;transform:rotate(2deg)}
  .keychain-ring{left:54px;top:-28px;width:42px;height:42px;border-width:5px}
  .keychain-link{left:67px;top:4px;width:15px;height:26px;border-width:3px}
  .keychain-body-new{inset:22px 0 0;border-radius:22px;padding:10px}
  .keychain-brand{font-size:.48rem;margin-bottom:7px}
  .keychain-sticker{width:105px;height:92px;border-radius:11px}
  .keychain-sticker-copy{left:7px;bottom:7px}
  .keychain-sticker-copy strong{font-size:.65rem}
  .keychain-sticker-copy span{font-size:.42rem}
  .keychain-tap{font-size:.43rem;margin-top:6px}
}