.story-phone{width:100%;max-width:420px;aspect-ratio:9/11;border-radius:12px;position:relative;overflow:hidden;box-shadow:0 0 40px rgba(255,255,255,0.06); background: #1c2b61; display: flex; justify-content: center;}
@media(min-width:700px){.story-phone{border-radius:22px;max-width:480px;}}
.progress-container{position:absolute;top:10px;left:0;right:0;display:flex;gap:6px;padding:0 12px;z-index:20;}
.progress-bar{flex:1;height:3px;background:rgba(255,255,255,0.25);border-radius:2px;overflow:hidden;}
.progress-bar span{display:block;height:100%;width:0%;background:#fff;transition:width linear;}
.story-slide{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;transition:opacity .4s ease;display:flex;flex-direction:column;justify-content:center;align-items:center;color:white;text-align:center;}
.story-slide.active{opacity:1;}
.story-zoom{animation:zoomStory 9s linear forwards;}
@keyframes zoomStory{0%{transform:scale(.85);}100%{transform:scale(1);}}
.tap-zones{position:absolute;inset:0;display:flex;z-index:30;}
.tap-left,.tap-right{flex:1;}
.tap-left{left:0;}
.tap-right{right:0;}
.hold-layer{position:absolute;inset:0;z-index:40;}
.instructions{
  position:absolute;
  bottom:15px;
  width:100%;
  text-align:center;
  color:rgba(255,255,255,0.7);
  font-size:0.8rem;
  z-index:50;
  pointer-events:none;
}

@media (min-width: 768px) {
    .story-phone{
        max-width: 90%;
        aspect-ratio: 24 / 8;
        min-height: 50vh;
        padding: 20px;
        left: 5%;
    }
}

.mercado{
    padding:10px;
}