/* CARIBIAN · módulo: Nuestros bowls (reels + ventana de plato)
   Al pasar a PHP este CSS no cambia. */
.carta :focus-visible{outline-color:#fff}
.carta h2 .script::after{content:'';position:absolute;left:2%;right:0;bottom:-.02em;height:.09em;background:var(--red);border-radius:99px;transform:scaleX(0);transform-origin:left;animation:draw .9s .9s var(--ease) forwards}
.carta{--sbg:#1F244F;background:var(--navy-d);color:#fff;padding:clamp(80px,14vw,130px) 0 clamp(72px,12vw,120px);overflow:hidden}
.carta .head{position:relative;margin-bottom:22px}
.carta h2{color:#fff}
.carta h2 .script{position:relative;display:inline-block;color:#fff}
.carta .lede{color:rgba(255,255,255,.75)}
.carta .kicker{color:#fff;opacity:.85}
.reels{position:relative;display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px var(--pad) 26px;scroll-padding-inline:var(--pad);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.reels::-webkit-scrollbar{display:none}
.reel{position:relative;flex:0 0 min(70vw,300px);aspect-ratio:9/16;border:0;padding:0;border-radius:28px;overflow:hidden;scroll-snap-align:start;background:var(--navy);cursor:pointer;text-align:left;color:#fff;box-shadow:0 20px 40px rgba(6,8,30,.4);transition:transform .5s var(--ease);-webkit-tap-highlight-color:transparent}
.reel:hover{transform:translateY(-6px)}
.reel img,.reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel video{opacity:0;transition:opacity .5s}
.reel.has-video video{opacity:1}
.reel::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(15,18,50,.88) 0%,rgba(15,18,50,0) 46%)}
.reel .play{position:absolute;z-index:2;top:14px;right:14px;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:grid;place-items:center}
.reel .play i{width:18px;height:18px;margin-left:2px}
.reel .info{position:absolute;z-index:2;left:18px;right:18px;bottom:18px;display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.reel .name{font-weight:700;font-size:1.3rem;line-height:1.05;letter-spacing:-.02em}
.reel .price{flex:none;background:var(--red);border-radius:999px;padding:6px 12px;font-weight:700;font-size:.95rem}
.carta .center{position:relative}
.dm-media{position:relative;background:var(--navy);height:min(50svh,460px)}
.dm-media video,.dm-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dm-body{padding:22px 22px 26px}
.dm-body h3{font-size:2rem;line-height:1;letter-spacing:-.03em;color:var(--navy);margin-top:2px}
.dm-price{display:inline-block;margin:12px 0 4px;background:var(--red);color:#fff;font-weight:700;border-radius:999px;padding:5px 14px}
.dm-desc{color:var(--mut);margin-top:10px}
.dm-body h4{margin:20px 0 10px;font-size:1rem;color:var(--navy)}
.dm-actions{display:grid;gap:10px;margin-top:24px}
.dm-actions .btn i{width:20px;height:20px}
@media (min-width:720px){
  #dish-modal .sheet-scroll{display:grid;grid-template-columns:360px 1fr;overflow:hidden;max-height:86svh}
  #dish-modal .dm-media{height:auto;min-height:560px}
  #dish-modal .dm-body{overflow-y:auto;padding:36px 34px}
}
@media (min-width:960px){
  .reels{justify-content:center;overflow:visible;gap:24px;padding-bottom:30px}
  .reel{flex-basis:300px}
}