/* ═══════════════════════════════════════════════
   KIBO SUSHI — MIDNIGHT TOKYO PREMIUM
   menu.css — Menu Page · Cards · Cart Drawer
   Performance: contain, GPU animations, dvh units
═══════════════════════════════════════════════ */

/* ═════════════════════════════════════════
   DISCOUNT STRIP (top banner)
═════════════════════════════════════════ */
.discount-strip{background:linear-gradient(90deg,var(--accent-red) 0%,#cc1f3f 100%);padding:.6rem 5%;display:flex;align-items:center;justify-content:center;gap:2rem;flex-wrap:wrap;margin-top:var(--nav-h)}
.discount-strip-item{display:flex;align-items:center;gap:6px;font-family:var(--font-display);font-size:.7rem;font-weight:700;letter-spacing:.06em;color:#fff;white-space:nowrap}
.discount-strip-item svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}

/* ═════════════════════════════════════════
   PAGE HERO (compact header)
═════════════════════════════════════════ */
.page-hero{height:240px;display:flex;align-items:flex-end;padding:0 5% 3rem;position:relative;overflow:hidden;background:radial-gradient(ellipse at 30% 60%,rgba(255,45,85,.12) 0%,transparent 60%),radial-gradient(ellipse at 80% 20%,rgba(0,229,255,.06) 0%,transparent 60%),var(--bg-deep)}
.page-hero::after{content:'寿司';position:absolute;bottom:-20px;right:5%;font-family:var(--font-jp);font-size:14rem;font-weight:900;color:rgba(255,45,85,.04);line-height:1;pointer-events:none;user-select:none}
.page-hero-inner{max-width:1280px;width:100%;margin:0 auto}
.page-hero .section-label{margin-bottom:.75rem}
.page-hero .section-title{font-size:clamp(2rem,5vw,3.5rem)}
.page-hero .section-sub{margin-top:.5rem}

/* ═════════════════════════════════════════
   DELIVERY INFO PANEL
═════════════════════════════════════════ */
.delivery-info{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);padding:1.25rem 1.5rem;margin-bottom:2.5rem;display:flex;align-items:center;gap:2rem;flex-wrap:wrap}
.delivery-info-item{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--text-secondary)}
.delivery-info-item svg{width:16px;height:16px;stroke:var(--accent-cyan);fill:none;stroke-width:1.8;flex-shrink:0}
.delivery-info-item strong{color:var(--text-primary);font-weight:600}

/* ═════════════════════════════════════════
   CATEGORY TABS — sticky under navbar
═════════════════════════════════════════ */
.menu-tabs-wrapper{position:sticky;top:var(--nav-h);z-index:100;background:rgba(6,6,15,.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border);contain:layout style}
.menu-tabs{max-width:1280px;margin:0 auto;padding:0 5%;display:flex;gap:0;overflow-x:auto;scrollbar-width:none}
.menu-tabs::-webkit-scrollbar{display:none}
.tab-btn{flex-shrink:0;padding:1.1rem 1.5rem;font-family:var(--font-display);font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);border-bottom:2px solid transparent;transition:color var(--transition),border-color var(--transition);white-space:nowrap}
.tab-btn:hover{color:var(--text-secondary)}
.tab-btn.active{color:var(--text-primary);border-bottom-color:var(--accent-red)}

/* Estilos de la Barra de Búsqueda */
.search-bar-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 5% 0.8rem;
  display: flex;
  justify-content: center;
}
.search-bar-wrapper {
  position: relative;
  width: 100%;
  max-width: 600px;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 50px;
  padding: 0 1.25rem;
  transition: all var(--transition);
}
.search-bar-wrapper:focus-within {
  border-color: var(--accent-cyan);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 0 15px rgba(0, 229, 255, 0.15);
}
.search-icon {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  margin-right: 0.75rem;
  flex-shrink: 0;
  transition: color var(--transition);
}
.search-bar-wrapper:focus-within .search-icon {
  color: var(--accent-cyan);
}
#menu-search-input {
  width: 100%;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.85rem;
  padding: 0.7rem 0;
  outline: none;
}
#menu-search-input::placeholder {
  color: var(--text-muted);
}
#search-clear-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0 0.25rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
#search-clear-btn:hover {
  color: var(--accent-red);
}

/* Barra de Progreso de Cross-Selling */
.xsell-progress-container {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}
.xsell-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.xsell-progress-text {
  color: var(--text-secondary);
}
.xsell-progress-text span {
  color: var(--accent-gold);
}
.xsell-progress-unlocked {
  color: var(--accent-cyan);
  text-shadow: 0 0 8px rgba(0, 229, 255, 0.2);
}
.xsell-progress-bg {
  width: 100%;
  height: 8px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 50px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.03);
}
.xsell-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent-red) 0%, var(--accent-gold) 100%);
  border-radius: 50px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 10px rgba(255, 214, 10, 0.2);
}
.xsell-progress-bar.unlocked {
  background: linear-gradient(90deg, var(--accent-gold) 0%, var(--accent-cyan) 100%);
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.35);
}

/* ═════════════════════════════════════════
   MENU CONTENT
═════════════════════════════════════════ */
.menu-content{padding:3rem 5%}
.menu-content-inner{max-width:1280px;margin:0 auto}
.menu-category{margin-bottom:4.5rem}
.category-header{display:flex;align-items:baseline;gap:1rem;margin-bottom:2rem;padding-bottom:1rem;border-bottom:1px solid var(--border)}
.category-title{font-family:var(--font-display);font-weight:800;font-size:1.5rem;letter-spacing:-.01em;color:var(--text-primary)}
.category-count{font-family:var(--font-jp);font-size:.75rem;color:var(--text-muted)}
.category-jp{font-family:var(--font-jp);font-size:.75rem;color:var(--accent-red);opacity:.6;margin-left:auto}
.category-sub-title{font-family:var(--font-display);font-weight:700;font-size:1rem;color:var(--text-secondary);margin-bottom:1.5rem;margin-top:2.5rem;padding-bottom:.5rem;border-bottom:1px solid rgba(255,255,255,.03)}

/* Grid variants */
.menu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem}
.menu-grid-compact{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem}

/* ═════════════════════════════════════════
   MENU CARD — standard (with image/emoji)
═════════════════════════════════════════ */
.menu-card{cursor:pointer;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;display:flex;flex-direction:column;transition:var(--transition);position:relative;contain:content}
.menu-card:hover{background:var(--bg-card-hover);border-color:rgba(255,45,85,.2);transform:translateY(-4px);box-shadow:var(--shadow-card),var(--shadow-red)}
.card-img-wrap{position:relative;aspect-ratio:1 / 1;overflow:hidden;background:var(--bg-deep)}
.card-img-wrap img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;display:block}
.menu-card:hover .card-img-wrap img{transform:scale(1.05)}
.img-zoom-fix { transform: scale(1.4) !important; }
.menu-card:hover .img-zoom-fix { transform: scale(1.48) !important; }
.card-emoji-wrap{position:relative;aspect-ratio:16/10;overflow:hidden;background:linear-gradient(135deg,var(--bg-deep) 0%,var(--bg-card) 100%);display:flex;align-items:center;justify-content:center;font-size:3.5rem}
.card-tag{position:absolute;top:12px;left:12px;padding:4px 10px;background:var(--accent-red);color:#fff;font-family:var(--font-display);font-size:.65rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:50px;z-index:2}
.card-tag.popular{background:var(--accent-gold);color:#000}
.card-tag.nuevo{background:var(--accent-cyan);color:#000}
.card-tag.promo{background:#ff6b35;color:#fff}
.card-tag.vegan{background:#4caf50;color:#fff}
.card-body{padding:1.25rem;flex:1;display:flex;flex-direction:column}
.card-name{font-family:var(--font-display);font-weight:700;font-size:1rem;color:var(--text-primary);line-height:1.3;margin-bottom:.4rem}
.card-desc{font-size:.8rem;color:var(--text-secondary);line-height:1.5;flex:1;margin-bottom:1rem;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-footer{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.card-price{font-family:var(--font-display);font-size:1.1rem;font-weight:800;color:var(--accent-gold);letter-spacing:-.01em}
.card-price sub{font-size:.65rem;font-weight:500;color:var(--text-muted);vertical-align:baseline;margin-right:2px}
.add-btn{width:38px;height:38px;border-radius:50%;background:var(--accent-red);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:300;transition:var(--transition);flex-shrink:0;line-height:1}
.add-btn:hover{background:#ff1a40;transform:scale(1.1) rotate(90deg);box-shadow:0 4px 16px rgba(255,45,85,.5)}
.add-btn.added{background:#1db954;transform:scale(1.1)}

/* ═════════════════════════════════════════
   COMPACT CARD — for sushi rolls (many items)
═════════════════════════════════════════ */
.menu-card-compact{cursor:pointer;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:1rem 1.25rem;display:flex;align-items:center;justify-content:space-between;gap:.75rem;transition:var(--transition);contain:content}
.menu-card-compact:hover{background:var(--bg-card-hover);border-color:rgba(255,45,85,.15);transform:translateY(-2px);box-shadow:0 4px 20px rgba(0,0,0,.3)}
.compact-info{flex:1;min-width:0}
.compact-name{font-family:var(--font-display);font-weight:700;font-size:.875rem;color:var(--text-primary);margin-bottom:2px}
.compact-desc{font-size:.72rem;color:var(--text-muted);line-height:1.4;margin-bottom:3px;display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.compact-price{font-family:var(--font-display);font-size:.8rem;font-weight:700;color:var(--accent-gold)}
.compact-add{width:32px;height:32px;border-radius:50%;background:var(--accent-red);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1rem;transition:var(--transition);flex-shrink:0}
.compact-add:hover{background:#ff1a40;transform:scale(1.1)}
.compact-add.added{background:#1db954}

/* ═════════════════════════════════════════
   CART DRAWER — slide from right
═════════════════════════════════════════ */
.cart-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:2000;opacity:0;pointer-events:none;transition:opacity .35s ease;backdrop-filter:blur(4px)}
.cart-overlay.open{opacity:1;pointer-events:all}
.cart-drawer{position:fixed;top:0;right:0;width:420px;max-width:100vw;height:100vh;height:100dvh;background:var(--bg-deep);border-left:1px solid var(--border);z-index:2001;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .4s var(--ease);box-shadow:-20px 0 60px rgba(0,0,0,.5);contain:layout style}
.cart-drawer.open{transform:translateX(0)}

/* Header */
.cart-header{padding:1rem 1.25rem;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:1rem;flex-shrink:0}
.cart-header-center{flex:1;display:flex;flex-direction:column;align-items:center}
.cart-title{font-family:var(--font-display);font-weight:800;font-size:1.1rem;letter-spacing:-.01em;line-height:1}
.cart-item-count{font-size:.7rem;color:var(--text-muted);margin-top:2px}
.cart-close{width:44px;height:44px;border-radius:var(--radius-sm);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text-primary);font-size:1.5rem;transition:var(--transition);background:rgba(255,255,255,0.03);cursor:pointer}
.cart-close:hover{background:rgba(255,255,255,0.08);border-color:var(--text-primary)}
.cart-clear-btn{background:transparent;border:1px solid rgba(255,45,85,0.2);color:#ff2d55;border-radius:6px;padding:6px 10px;font-size:0.7rem;cursor:pointer;display:flex;align-items:center;gap:4px}
.cart-clear-btn:hover{background:rgba(255,45,85,0.1) !important}

/* Empty state */
.cart-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;color:var(--text-muted);padding:2rem;text-align:center}
.cart-empty-icon{font-size:4rem;opacity:.2}
.cart-empty h3{font-family:var(--font-display);font-size:1rem;font-weight:700;color:var(--text-secondary)}
.cart-empty p{font-size:.875rem;color:var(--text-muted)}

/* Items */
.cart-items{flex:1;overflow-y:auto;padding:1rem 1.5rem;scrollbar-width:thin}
.cart-item{display:flex;align-items:center;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--border);animation:slideIn .3s ease}
@keyframes slideIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
.cart-item-thumb{width:56px;height:56px;border-radius:var(--radius-sm);overflow:hidden;background:var(--bg-card);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1.5rem}
.cart-item-info{flex:1;min-width:0}
.cart-item-name{font-family:var(--font-display);font-size:.875rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:4px}
.cart-item-price{font-size:.8rem;color:var(--accent-gold);font-weight:600}
.cart-item-qty{display:flex;align-items:center;gap:8px;flex-shrink:0}
.cart-qty-btn{width:26px;height:26px;border-radius:50%;border:1px solid var(--border);color:var(--text-primary);display:flex;align-items:center;justify-content:center;font-size:.875rem;transition:var(--transition);line-height:1}
.cart-qty-btn:hover{border-color:var(--accent-red);background:rgba(255,45,85,.1)}
.cart-qty-num{font-family:var(--font-display);font-weight:700;font-size:.875rem;min-width:20px;text-align:center}
.cart-item-remove{color:var(--text-muted);font-size:1rem;transition:color var(--transition);padding:4px;flex-shrink:0}
.cart-item-remove:hover{color:var(--accent-red)}

/* Alerta de Local Cerrado */
.cart-closed-alert {
  margin: 1rem 1.5rem 0.5rem;
  padding: 1rem;
  background: rgba(255, 45, 85, 0.08);
  border: 1.5px solid rgba(255, 45, 85, 0.4);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 0.8rem;
  line-height: 1.55;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  animation: fadeInStep 0.3s ease-out;
}
.cart-closed-alert strong {
  color: var(--accent-red);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.02em;
  display: inline-block;
  margin-bottom: 4px;
}
.cart-closed-alert small {
  display: block;
  margin-top: 8px;
  color: var(--text-muted);
  font-size: 0.72rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 6px;
}

/* Footer / Summary */
.cart-footer{padding:1.25rem 1.5rem 1.5rem;border-top:1px solid var(--border);flex-shrink:0;background:var(--bg-deep)}
.cart-summary{margin-bottom:1.25rem}
.cart-summary-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem;font-size:.875rem;color:var(--text-secondary)}
.cart-summary-row.total{padding-top:.75rem;margin-top:.25rem;border-top:1px solid var(--border);font-size:1.1rem;font-family:var(--font-display);font-weight:800;color:var(--text-primary)}
.cart-summary-row.total span:last-child{color:var(--accent-gold)}
.cart-notes{width:100%;background:rgba(255,255,255,0.03);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-body);font-size:.8rem;padding:.75rem 1rem;resize:none;transition:border-color var(--transition);outline:none}
.cart-notes::placeholder{color:var(--text-muted)}
.cart-notes:focus{border-color:var(--accent-red)}

.cart-scroll-area { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding: 0 1.5rem; }
.cart-items { padding-bottom: 2rem; }

.checkout-form { padding: 1.5rem 0; }
.form-instruction { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 1.5rem; line-height: 1.5; }
.form-group { margin-bottom: 1.25rem; }
.cart-label { display: block; margin-bottom: 0.5rem; font-size: 0.75rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.checkout-input { width: 100%; background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-primary); padding: 0.75rem 1rem; font-size: 0.9rem; transition: var(--transition); outline: none; }
.checkout-input:focus { border-color: var(--accent-cyan); }
.checkout-radios { display: flex; gap: 1rem; margin-top: 0.5rem; }
.checkout-radio { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0.75rem; background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; font-size: 0.8rem; transition: var(--transition); }
.checkout-radio:has(input:checked) { border-color: var(--accent-red); background: rgba(255,45,85,0.05); color: var(--text-primary); }
.checkout-radio input { display: none; }

.cart-back-btn { width: auto; height: 38px; padding: 0 1rem; border-radius: 50px; border: 1px solid var(--border); background: transparent; color: var(--text-secondary); font-family: var(--font-display); font-size: 0.75rem; font-weight: 700; cursor: pointer; transition: var(--transition); display: flex; align-items: center; justify-content: center; }
.cart-back-btn:hover { border-color: var(--text-primary); color: var(--text-primary); background: rgba(255,255,255,0.05); }

.cart-step-2-summary { margin-bottom: 1rem; text-align: center; padding: 1rem; background: rgba(255,214,10,0.03); border-radius: var(--radius-sm); border: 1px dashed rgba(255,214,10,0.2); }
.summary-total { font-family: var(--font-display); font-size: 1.1rem; font-weight: 800; color: var(--text-primary); }
.summary-total strong { color: var(--accent-gold); margin-left: 5px; }
.summary-hint { font-size: 0.65rem; color: var(--text-muted); margin-top: 2px; }

/* WhatsApp CTA — pulsing glow */
.cart-wsp-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;padding:1rem;background:#25d366;color:#fff;font-family:var(--font-display);font-size:.9rem;font-weight:700;letter-spacing:.04em;border-radius:var(--radius-md);transition:var(--transition);cursor:pointer;border:none;animation:glowPulse 3s ease infinite}
.cart-wsp-btn:hover{background:#1ebe58;transform:translateY(-2px);box-shadow:0 8px 24px rgba(37,211,102,.3)}
.cart-wsp-btn svg{width:20px;height:20px}
.cart-disclaimer{margin-top:.75rem;text-align:center;font-size:.72rem;color:var(--text-muted);line-height:1.5}
@keyframes glowPulse{0%,100%{box-shadow:0 0 20px rgba(37,211,102,.15)}50%{box-shadow:0 0 35px rgba(37,211,102,.35)}}

.payment-radios { margin-top: 0.5rem; }
.payment-radios .checkout-radio { padding: 0.6rem; font-size: 0.75rem; }

/* ═════════════════════════════════════════
   FLOATING CART (mobile)
═════════════════════════════════════════ */
.floating-cart{display:none;position:fixed;bottom:1.5rem;right:1.5rem;z-index:500}
.floating-cart-btn{display:flex;align-items:center;gap:10px;padding:.9rem 1.4rem;background:var(--accent-red);color:#fff;border-radius:50px;font-family:var(--font-display);font-size:.875rem;font-weight:700;box-shadow:0 8px 32px rgba(255,45,85,.4);transition:var(--transition);cursor:pointer;border:none;letter-spacing:.04em}
.floating-cart-btn:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(255,45,85,.55)}
.floating-cart-btn svg{width:18px;height:18px}

/* ═════════════════════════════════════════
   REDUCED MOTION
═════════════════════════════════════════ */
@media(prefers-reduced-motion:reduce){
  .cart-item{animation:none}
  .cart-wsp-btn{animation:none}
  .menu-card:hover,.menu-card-compact:hover,.floating-cart-btn:hover,.add-btn:hover,.compact-add:hover{transform:none}
}

/* ═════════════════════════════════════════
   RESPONSIVE
═════════════════════════════════════════ */
.cart-step { display: none; flex-direction: column; flex: 1; height: 100%; overflow: hidden; animation: fadeInStep 0.3s ease-out forwards; }
.cart-step.active { display: flex; }
@keyframes fadeInStep { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

@media(max-width:768px){
  .floating-cart{display:block}
  .menu-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
  .menu-grid-compact{grid-template-columns:1fr}
  
  /* TAREA 1: VISIBILIDAD DEL PEDIDO */
  .cart-drawer{width:100vw; height: 100dvh; display: flex; flex-direction: column;}
  .cart-footer { position: relative; background: var(--bg-deep); border-top: 1px solid var(--border); padding-bottom: calc(env(safe-area-inset-bottom) + 1.5rem); }
  .cart-summary-row.total { font-size: 1.4rem; border-top: 2px solid var(--accent-gold); padding-top: 1rem; }

  .cart-next-btn { width: 100%; padding: 1.1rem; background: var(--accent-red); color: #fff; border: none; border-radius: var(--radius-md); font-family: var(--font-display); font-weight: 800; font-size: 0.95rem; cursor: pointer; transition: 0.3s; box-shadow: 0 4px 15px rgba(255,45,85,0.3); }
  .cart-next-btn:disabled { opacity: 0.5; cursor: not-allowed; }

  .page-hero{height:200px;padding-bottom:2rem}
  .page-hero::after{font-size:8rem}
  .discount-strip{gap:1rem}
  .discount-strip-item{font-size:.6rem}
  
  /* TAREA 3: REESTRUCTURACIÓN DE HORARIOS */
  .delivery-info{ display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 1.5rem; }
  .delivery-info-item { flex-direction: column; align-items: flex-start; gap: 0.25rem; font-size: 0.75rem; }
  .delivery-info-item:first-child { grid-column: span 2; }
}

/* TAREA 2: PREFIJO TELEFÓNICO */
.phone-input-wrapper {
  display: flex;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0 1rem;
  margin-bottom: 1rem;
  transition: border-color var(--transition);
}
.phone-input-wrapper:focus-within { border-color: var(--accent-cyan); }
.phone-prefix {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-right: 0.5rem;
  user-select: none;
}
.phone-input-wrapper .checkout-input {
  border: none !important;
  margin-bottom: 0 !important;
  padding-left: 0 !important;
  flex: 1;
}
@media(max-width:480px){
  .menu-grid{grid-template-columns:1fr}
  .discount-strip{flex-direction:column;gap:.5rem}
}

/* ═════════════════════════════════════════
   PROMOS SUB-SECTIONS (cash-only / all-payment)
═════════════════════════════════════════ */
.promos-block{margin-bottom:3rem}
.promos-block-header{display:flex;align-items:flex-start;gap:1.1rem;padding:1.25rem 1.5rem;border-radius:var(--radius-md);margin-bottom:1.75rem}
.cash-only-block .promos-block-header{background:rgba(255,214,10,.07);border:2px solid rgba(255,214,10,.55)}
.all-payment-block .promos-block-header{background:rgba(0,229,255,.05);border:2px solid rgba(0,229,255,.22)}
.promos-block-icon{font-size:2rem;line-height:1;flex-shrink:0;margin-top:.1rem}
.promos-block-header h3{font-family:var(--font-display);font-size:1.35rem;font-weight:900;letter-spacing:.04em;margin:0 0 .35rem;line-height:1.15;text-transform:uppercase}
.cash-only-block .promos-block-header h3{color:var(--accent-gold)}
.all-payment-block .promos-block-header h3{color:var(--accent-cyan)}
.promos-block-header p{font-size:.8rem;color:var(--text-muted);margin:0;line-height:1.55}
@media(max-width:480px){.promos-block-header h3{font-size:1.1rem}.promos-block-icon{font-size:1.6rem}}

/* ═════════════════════════════════════════
   PRODUCT DETAIL MODAL
═════════════════════════════════════════ */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:3000;display:flex;align-items:center;justify-content:center;padding:1rem;opacity:0;pointer-events:none;transition:opacity .3s ease;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal-box{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);width:100%;max-width:480px;max-height:90vh;overflow-y:auto;transform:translateY(20px) scale(.97);transition:transform .3s cubic-bezier(.34,1.56,.64,1);position:relative;display:flex;flex-direction:column}
.modal-overlay.open .modal-box{transform:translateY(0) scale(1)}
.modal-close{position:absolute;top:1rem;right:1rem;width:34px;height:34px;border-radius:50%;border:1px solid var(--border);background:rgba(0,0,0,.4);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;font-size:1.1rem;cursor:pointer;transition:var(--transition);z-index:2;line-height:1}
.modal-close:hover{border-color:var(--accent-red);color:var(--accent-red)}
.modal-hero{position:relative;aspect-ratio:16/9;background:var(--bg-deep);display:flex;align-items:center;justify-content:center;font-size:5rem;border-radius:var(--radius-md) var(--radius-md) 0 0;overflow:hidden;flex-shrink:0}
.modal-hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 60%,rgba(255,45,85,.08),transparent 70%)}
.modal-tag{position:absolute;top:12px;left:12px;padding:4px 12px;background:var(--accent-red);color:#fff;font-family:var(--font-display);font-size:.65rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:50px}
.modal-tag.popular{background:var(--accent-gold);color:#000}
.modal-body{padding:1.5rem 1.5rem 0;flex:1;display:flex;flex-direction:column}
.modal-name{font-family:var(--font-display);font-weight:800;font-size:1.3rem;color:var(--text-primary);line-height:1.2;margin-bottom:.5rem}
.modal-price{font-family:var(--font-display);font-size:1.4rem;font-weight:800;color:var(--accent-gold);margin-bottom:1rem}
.modal-desc{font-size:.875rem;color:var(--text-secondary);line-height:1.65;margin-bottom:1.5rem}

/* Uramaki wrapper picker */
.modal-wrapper-section{margin-bottom:1.5rem}
.modal-wrapper-label{font-family:var(--font-display);font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin-bottom:.75rem;display:flex;align-items:center;gap:.5rem}
.modal-wrapper-label span{color:var(--accent-red)}
.wrapper-pills{display:flex;gap:.5rem;flex-wrap:wrap}
.wrapper-pill{padding:.45rem 1rem;border:1.5px solid var(--border);border-radius:50px;background:transparent;color:var(--text-secondary);font-family:var(--font-display);font-size:.78rem;font-weight:600;cursor:pointer;transition:var(--transition);white-space:nowrap}
.wrapper-pill:hover{border-color:var(--accent-red);color:var(--text-primary)}
.wrapper-pill.selected{border-color:var(--accent-red);background:var(--accent-red);color:#fff}

.modal-footer{
  padding:1rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
  background:linear-gradient(to top, var(--bg-card) 80%, transparent);
  position:sticky; bottom:0; z-index:5;
}
.modal-add-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;padding:1rem 1.5rem;background:var(--accent-red);color:#fff;font-family:var(--font-display);font-size:.95rem;font-weight:700;letter-spacing:.04em;border-radius:var(--radius-md);border:none;cursor:pointer;transition:var(--transition);box-shadow:0 -10px 30px rgba(0,0,0,0.3)}
.modal-add-btn:hover{background:#ff1a40;transform:translateY(-2px);box-shadow:0 8px 24px rgba(255,45,85,.4)}
.modal-add-btn:active{transform:translateY(0)}

/* Make cards clickable */
.menu-card{cursor:pointer}
.menu-card-compact{cursor:pointer}

@media(max-width:480px){
  .modal-box{max-height:92vh; border-radius: var(--radius-lg);}
  .modal-hero{aspect-ratio:4/3}
  .modal-body{padding:1.25rem 1.25rem calc(env(safe-area-inset-bottom, 20px) + 1rem)}
}