:root{
  --coral:#fa6450;
  --coral-d:#e8513d;
  --ink:#2b2b2b;
  --bar:rgba(70,70,70,.72);
  --nav-h:78px;
  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#efebe6;color:var(--ink);
  font-family:"Myriad Pro","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif;
  overscroll-behavior:none}
body{overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.app{position:relative;height:100vh;height:100dvh;max-width:520px;margin:0 auto;display:flex;flex-direction:column;background:#fff;
  box-shadow:0 0 60px rgba(0,0,0,.08)}

/* ---------- Escenario ---------- */
.stage{position:relative;flex:1;overflow:hidden;background:#f4f1ec;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:pointer}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .38s ease;will-change:opacity}
.slide.on{opacity:1;z-index:1}
.slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;pointer-events:none}
.slide .blur{position:absolute;inset:-40px;background:#f4f1ec center/cover no-repeat;filter:blur(28px) saturate(1.1);opacity:0;transform:scale(1.1)}
.slide.fit img{object-fit:contain}
.slide.fit .blur{opacity:.85}
.shade{position:absolute;inset:0 0 auto 0;height:110px;z-index:2;pointer-events:none;
  background:linear-gradient(rgba(0,0,0,.14),rgba(0,0,0,0))}

/* Barras de progreso */
.bars{position:absolute;z-index:5;top:calc(var(--sat) + 12px);left:4.5%;right:4.5%;display:flex;gap:4px;pointer-events:none}
.bar{flex:1;height:4px;border-radius:2px;background:var(--bar);overflow:hidden}
.bar i{display:block;height:100%;background:var(--coral);transform-origin:left center;transform:scaleX(0)}
.bar.cur i{transform:scaleX(1)}
.bar.cur.run i{transform:scaleX(0);animation:fill var(--dur,6s) linear forwards}
.paused .bar.cur.run i{animation-play-state:paused}
@keyframes fill{to{transform:scaleX(1)}}

/* Logo de la tienda */
.store{position:absolute;z-index:5;top:calc(var(--sat) + 26px);left:4.5%;display:block;line-height:0}
.store img{height:38px;max-width:140px;object-fit:contain;filter:drop-shadow(0 1px 6px rgba(0,0,0,.18))}

/* Precio */
.price{position:absolute;z-index:5;top:calc(var(--sat) + 28px);right:4.5%;background:var(--coral);color:#fff;
  font-weight:700;font-size:18px;padding:7px 14px;pointer-events:none;border-radius:999px;box-shadow:0 4px 14px rgba(0,0,0,.15)}

/* Marca */
.brand {
    position: absolute;
    z-index: 5;
    left: 0;
    top: 64%;
    width: clamp(120px, 39%, 116px);
    height: clamp(70px, 13vw, 66px);
    background: #fff;
    border: 5px solid var(--coral);
    border-left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    transition: opacity .3s;
    pointer-events: none;
}
  
.brand img{max-width:100%;max-height:100%;object-fit:contain}
.brand b{font-family:Didot,"Bodoni 72","Playfair Display",Georgia,serif;font-size:clamp(20px,6.4vw,34px);letter-spacing:-.02em;font-weight:500;
  text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#111}

/* Botones */
.actions{position:absolute;z-index:6;left:5%;right:5%;bottom:16px;display:grid;grid-template-columns:1fr 1fr;gap:4%}

.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: clamp(50px, 14vw, 44px);
    border-radius: 18px;
    font: inherit;
    font-size: clamp(19px, 5.6vw, 9px);
    letter-spacing: .01em;
    text-decoration: none;
    cursor: pointer;
    transition: transform .12s, background .2s;
}

.btn:active{transform:scale(.96)}
.btn-solid{background:var(--coral);color:#fff;border:0;box-shadow:0 6px 18px rgba(250,100,80,.35)}
.btn-ghost{background:#fff;color:var(--coral);border:3px solid var(--coral)}
.btn-solid:hover{background:var(--coral-d)}

.app.hold .bars,.app.hold .actions,.app.hold .brand,.app.hold .price,.app.hold .store{opacity:0;transition:opacity .25s}
.bars,.actions,.store,.price{transition:opacity .25s}

/* ---------- Iconos de categorías ---------- */
.cats{flex:0 0 auto;display:flex;border-top:7px solid var(--coral);background:#fff;height:calc(var(--nav-h) + var(--sab));padding-bottom:var(--sab)}
.cat{flex:1 1 0;display:flex;align-items:center;justify-content:center;color:var(--coral);text-decoration:none;transition:background .25s,color .25s;position:relative}
.cat .ico{width:54px;height:54px;transition:transform .2s}
.cat span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.cat.on{background:var(--coral);color:#fff}
.cat:active .ico{transform:scale(.9)}
.cats.scroll{overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cats.scroll::-webkit-scrollbar{display:none}
.cats.scroll .cat{flex:0 0 calc(100% / 5.5);scroll-snap-align:start}

/* ---------- Otros ---------- */
.toast{position:absolute;z-index:9;left:50%;bottom:96px;transform:translate(-50%,20px);background:rgba(30,30,30,.88);color:#fff;
  padding:10px 18px;border-radius:999px;font-size:15px;opacity:0;pointer-events:none;transition:.3s;white-space:nowrap}
.toast.show{opacity:1;transform:translate(-50%,0)}
.empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:30px;font-size:20px;color:#777;z-index:3}

@media (min-width:521px){
  .app{height:min(100dvh,100vh);}
}
@media (prefers-reduced-motion:reduce){
  .slide{transition:none}
}