/* ═══════════════════════════════════════════════════════════
   Restaurante SaaS — Diseño "Healthy Food" (estilo imagen ref)
   Fondo crema · tipografía grande · verde lima · tarjetas foto-grande
   ═══════════════════════════════════════════════════════════ */
:root {
  --fondo: #f3efe6;
  --panel: #ffffff;
  --panel-2: #faf7f0;
  --texto: #1a1a18;
  --texto-suave: #8a857a;
  --marca: #c5f048;
  --marca-tinta: #1a1a18;
  --marca-2: #d4f76a;
  --acento: #1a1a18;
  --acento-fuerte: #e8532b;
  --acento-fuerte2: #f0913a;
  --linea: rgba(0,0,0,.06);
  --negro: #1a1a18;
  --ok: #4ad97f;
  --warn: #ffb74d;
  --err: #ff5d52;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-elegante: cubic-bezier(0.32, 0.72, 0, 1);
  --font-display: 'Outfit', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
  --sombra-card: 0 10px 30px rgba(0,0,0,.06);
  --sombra-foto: 0 16px 40px rgba(0,0,0,.18);
  --r-grande: 30px;
  --r-medio: 22px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; max-width: 100%; min-height: 100%; overflow-x: hidden; font-family: var(--font-body); background: var(--fondo); -webkit-font-smoothing: antialiased; }
body { color: var(--texto); }

.app { width: 100vw; min-height: 100vh; min-height: 100dvh; position: relative; background: var(--fondo); }
.scroll-y { -webkit-overflow-scrolling: touch; }
.scroll-y::-webkit-scrollbar { width: 0; }

/* ───────── BOTONES ───────── */
.btn-dorado { border: 0; border-radius: 999px; background: var(--marca); color: var(--marca-tinta); font-weight: 700; font-family: var(--font-body); cursor: pointer; transition: transform .14s var(--ease-out), box-shadow .14s; box-shadow: 0 6px 20px rgba(197,240,72,.45); }
.btn-dorado:active { transform: scale(.97); }
.btn-ghost { border: 1px solid var(--linea); border-radius: 999px; background: transparent; color: var(--texto); font-weight: 600; font-family: var(--font-body); cursor: pointer; }
.btn-icono { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--panel); color: var(--texto); display: grid; place-items: center; cursor: pointer; box-shadow: var(--sombra-card); }

/* ───────── HEADER ───────── */
.r-header { padding: calc(env(safe-area-inset-top) + 18px) 22px 6px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.r-header-info { display: flex; align-items: center; gap: 12px; min-width: 0; }
.r-logo { width: 46px; height: 46px; border-radius: 50%; background: var(--marca); display: grid; place-items: center; flex-shrink: 0; overflow: hidden; box-shadow: 0 4px 14px rgba(197,240,72,.4); }
.r-logo img { width: 100%; height: 100%; object-fit: cover; }
.r-header-txt small { font-size: 12px; color: var(--texto-suave); }
.r-header-txt strong { display: block; font-size: 17px; font-family: var(--font-display); font-weight: 700; line-height: 1.1; }

/* ───────── HERO (título gigante) ───────── */
/* ═══════════ CARRUSEL DE IMÁGENES ═══════════ */
.r-carrusel { position: relative; width: 100%; height: 200px; overflow: hidden; margin-bottom: 4px; }
.r-carrusel-track { display: flex; height: 100%; transition: transform .6s var(--ease-out); }
.r-carrusel-slide { min-width: 100%; height: 100%; }
.r-carrusel-slide img { width: 100%; height: 100%; object-fit: cover; }
.r-carrusel-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(26,26,24,.8) 0%, transparent 55%); display: flex; align-items: flex-end; padding: 20px; pointer-events: none; }
.r-carrusel-overlay span { font-family: var(--font-display); font-size: 26px; font-weight: 800; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.r-carrusel-dots { position: absolute; bottom: 14px; right: 16px; display: flex; gap: 6px; z-index: 3; }
.r-carrusel-dot { width: 7px; height: 7px; border-radius: 999px; border: 0; background: rgba(255,255,255,.45); cursor: pointer; padding: 0; transition: all .3s; }
.r-carrusel-dot.activo { width: 20px; background: var(--marca); }

.r-hero { margin: 18px 22px 4px; position: relative; }
.r-hero-titulo-grande { font-family: var(--font-display); font-size: 52px; line-height: .92; font-weight: 800; letter-spacing: -2px; color: var(--texto); margin-bottom: 10px; }
.r-hero-sub-grande { font-size: 14px; color: var(--texto-suave); line-height: 1.5; max-width: 80%; }

.r-hero-img { margin: 16px 22px 4px; border-radius: var(--r-grande); overflow: hidden; position: relative; height: 200px; box-shadow: var(--sombra-foto); display: none; }
.r-hero-img.activo { display: block; }
.r-hero-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.r-hero-img-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.65), transparent 65%); }
.r-hero-img-txt { position: absolute; bottom: 0; padding: 22px; color: #fff; z-index: 1; }
.r-hero-img-txt h2 { font-family: var(--font-display); font-size: 30px; font-weight: 800; line-height: 1.02; text-shadow: 0 2px 14px rgba(0,0,0,.4); }
.r-hero-img-txt p { font-size: 13px; opacity: .92; margin-top: 4px; }

/* ───────── BUSCADOR ───────── */
.r-buscador { margin: 16px 22px; display: flex; align-items: center; gap: 11px; height: 54px; background: var(--panel); border-radius: 999px; padding: 0 20px; box-shadow: var(--sombra-card); }
.r-buscador svg { color: var(--texto-suave); flex-shrink: 0; }
.r-buscador input { flex: 1; border: 0; outline: none; background: transparent; color: var(--texto); font-size: 15px; font-family: var(--font-body); }
.r-buscador input::placeholder { color: var(--texto-suave); }

/* ───────── CATEGORÍAS (chips pill) ───────── */
.r-categorias { display: flex; gap: 10px; overflow-x: auto; padding: 6px 22px 10px; }
.r-categorias::-webkit-scrollbar { display: none; }
.r-cat-chip { flex-shrink: 0; display: flex; align-items: center; gap: 7px; padding: 12px 22px; border-radius: 999px; background: var(--panel); font-size: 14px; font-weight: 600; color: var(--texto); cursor: pointer; transition: all .2s var(--ease-out); white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,.04); }
.r-cat-chip.activa { background: var(--negro); color: #fff; }
.r-cat-chip .emoji { font-size: 16px; }

/* ───────── SECCIÓN ───────── */
.r-seccion-titulo { padding: 16px 22px 10px; display: flex; align-items: center; justify-content: space-between; }
.r-seccion-titulo h3 { font-family: var(--font-display); font-size: 24px; font-weight: 700; letter-spacing: -.5px; }

/* ───────── PLATOS — tarjeta destacada ───────── */
.r-platos { padding: 4px 22px 20px; display: flex; flex-direction: column; gap: 18px; }
.r-plato-card { background: var(--panel); border-radius: var(--r-grande); padding: 22px; position: relative; cursor: pointer; transition: transform .2s var(--ease-out); box-shadow: var(--sombra-card); min-height: 150px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; animation: r-sube .5s var(--ease-out) backwards; }
.r-plato-card:active { transform: scale(.98); }
.r-plato-card .r-plato-contenido { max-width: 56%; position: relative; z-index: 2; }
.r-plato-card h4 { font-family: var(--font-display); font-size: 22px; font-weight: 700; line-height: 1.05; margin-bottom: 6px; letter-spacing: -.5px; }
.r-plato-card .r-plato-desc { font-size: 12px; color: var(--texto-suave); margin-bottom: 12px; line-height: 1.4; }
.r-plato-card .r-plato-precio { font-family: var(--font-display); font-size: 30px; font-weight: 800; margin-bottom: 14px; }
.r-plato-foto-flotante { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 116px; height: 116px; aspect-ratio: 1; z-index: 1; }
.r-plato-foto-flotante::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; background: var(--marca); opacity: .22; z-index: 0; transition: opacity .3s var(--ease-out), transform .4s var(--ease-out); }
.r-plato-foto-flotante img { position: relative; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 50%; box-shadow: 0 10px 26px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.08); border: 4px solid var(--panel); z-index: 1; transition: transform .45s var(--ease-out), box-shadow .3s var(--ease-out); }
.r-plato-card:hover .r-plato-foto-flotante img, .r-plato-card:active .r-plato-foto-flotante img { transform: scale(1.07); box-shadow: 0 14px 32px rgba(0,0,0,.22), 0 3px 10px rgba(0,0,0,.1); }
.r-plato-card:hover .r-plato-foto-flotante::before { opacity: .4; transform: scale(1.05); }
.r-plato-card { min-height: 144px !important; }
.r-plato-contenido { max-width: 60%; }
.r-plato-etiqueta { display: inline-block; background: var(--marca); color: var(--marca-tinta); font-size: 10px; font-weight: 800; padding: 4px 11px; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 10px; }
.r-plato-fav { position: absolute; top: 18px; right: 18px; width: 36px; height: 36px; border-radius: 50%; background: var(--panel); border: 0; display: grid; place-items: center; cursor: pointer; z-index: 3; box-shadow: 0 2px 10px rgba(0,0,0,.1); }
.r-plato-pedir { display: inline-flex; align-items: center; gap: 8px; background: var(--marca); color: var(--marca-tinta); border: 0; padding: 11px 22px; border-radius: 999px; font-weight: 700; font-size: 14px; cursor: pointer; box-shadow: 0 6px 18px rgba(197,240,72,.45); transition: transform .15s; }
.r-plato-pedir:active { transform: scale(.94); }
@keyframes r-sube { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
.r-platos > *:nth-child(1) { animation-delay: .04s; }
.r-platos > *:nth-child(2) { animation-delay: .09s; }
.r-platos > *:nth-child(3) { animation-delay: .14s; }
.r-platos > *:nth-child(4) { animation-delay: .19s; }
.r-platos > *:nth-child(5) { animation-delay: .24s; }

/* ───────── CARRITO FLOTANTE ───────── */
.r-carrito-flotante { position: fixed; left: 22px; right: 22px; bottom: calc(env(safe-area-inset-bottom) + 20px); height: 60px; background: var(--negro); border-radius: 999px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px 0 24px; color: #fff; font-weight: 700; cursor: pointer; box-shadow: 0 10px 30px rgba(0,0,0,.25); z-index: 50; transform: translateY(120px); transition: transform .25s var(--ease-out); }
.r-carrito-flotante.visible { transform: translateY(0); }
.r-carrito-cant { background: var(--marca); color: var(--marca-tinta); border-radius: 999px; padding: 10px 20px; font-size: 16px; font-weight: 800; font-family: var(--font-display); letter-spacing: -.3px; }
.r-cf-label { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; }
.r-cf-label svg { flex-shrink: 0; }
#rCarritoCantNum { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; background: var(--marca); color: var(--marca-tinta); border-radius: 999px; font-size: 13px; font-weight: 800; }

/* ───────── OVERLAY + SHEET ───────── */
.r-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 80; }
.r-overlay.visible { opacity: 1; pointer-events: auto; }
.r-sheet { position: fixed; left: 0; right: 0; bottom: 0; max-height: 92vh; background: var(--fondo); border-radius: var(--r-grande) var(--r-grande) 0 0; z-index: 90; transform: translateY(100%); transition: transform .3s var(--ease-out), visibility .3s; visibility: hidden; display: flex; flex-direction: column; padding-bottom: calc(env(safe-area-inset-bottom) + 16px); }
.r-sheet.abierto { visibility: visible; }
.r-sheet.abierto { transform: translateY(0); }
.r-sheet-handle { width: 42px; height: 4px; border-radius: 999px; background: rgba(0,0,0,.15); margin: 12px auto 4px; }
.r-sheet-header { padding: 8px 22px 14px; display: flex; align-items: center; justify-content: space-between; }
.r-sheet-header h3 { font-family: var(--font-display); font-size: 22px; font-weight: 700; }
.r-sheet-body { overflow-y: auto; padding: 0 22px; }

/* ───────── DETALLE DE PLATO ───────── */
.r-detalle-foto { width: 100%; height: 230px; border-radius: var(--r-medio); overflow: hidden; margin-bottom: 18px; background: #eee; box-shadow: var(--sombra-foto); }
.r-detalle-foto img { width: 100%; height: 100%; object-fit: cover; }
.r-detalle-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 8px; }
.r-detalle-nombre { font-family: var(--font-display); font-size: 28px; font-weight: 800; line-height: 1.05; letter-spacing: -.5px; }
.r-detalle-kcal { font-size: 14px; color: var(--texto-suave); white-space: nowrap; padding-top: 6px; }
.r-detalle-desc { font-size: 14px; color: var(--texto-suave); line-height: 1.65; margin-bottom: 20px; }
.r-detalle-precio-card { background: var(--negro); border-radius: var(--r-medio); padding: 20px; margin-bottom: 20px; }
.r-detalle-precio-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.r-detalle-precio { font-family: var(--font-display); font-size: 32px; font-weight: 800; color: #fff; }
.r-detalle-precio-kcal { color: rgba(255,255,255,.7); font-size: 14px; }
.r-cantidad { display: flex; align-items: center; gap: 16px; background: rgba(255,255,255,.1); border-radius: 999px; padding: 6px; }
.r-cantidad button { width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255,255,255,.15); color: #fff; font-size: 20px; cursor: pointer; }
.r-cantidad span { font-size: 17px; font-weight: 700; min-width: 20px; text-align: center; color: #fff; }
.r-btn-add-detalle { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 56px; border: 0; border-radius: 999px; background: var(--marca); color: var(--marca-tinta); font-size: 16px; font-weight: 700; cursor: pointer; box-shadow: 0 8px 24px rgba(197,240,72,.45); transition: transform .15s; }
.r-btn-add-detalle:active { transform: scale(.97); }
.r-btn-add-flecha { width: 32px; height: 32px; border-radius: 50%; background: var(--marca-tinta); display: grid; place-items: center; }
.r-btn-add-flecha svg { stroke: var(--marca); }

/* ───────── CARRITO (items) ───────── */
.r-cart-item { display: flex; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--linea); }
.r-cart-item img { width: 60px; height: 60px; border-radius: 16px; object-fit: cover; flex-shrink: 0; }
.r-cart-item-info { flex: 1; min-width: 0; }
.r-cart-item-info h4 { font-size: 15px; font-weight: 700; }
.r-cart-item-info .precio { font-size: 14px; color: var(--texto-suave); font-weight: 600; }
.r-cart-controls { display: flex; align-items: center; gap: 10px; }
.r-cart-controls button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--linea); background: var(--panel); cursor: pointer; font-size: 16px; }
.r-cart-controls span { font-weight: 700; min-width: 16px; text-align: center; }

/* ───────── FORM ───────── */
.r-campo { margin-bottom: 14px; }
.r-campo label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.r-campo input, .r-campo select, .r-campo textarea { width: 100%; height: 50px; border: 0; border-radius: 16px; padding: 0 16px; font-size: 15px; font-family: var(--font-body); background: var(--panel); color: var(--texto); outline: none; box-shadow: 0 2px 8px rgba(0,0,0,.03); }
.r-campo input:focus { box-shadow: 0 0 0 2px var(--marca); }
.r-tipo-pedido { display: flex; gap: 8px; margin-bottom: 16px; }
.r-tipo-btn { flex: 1; height: 48px; border-radius: 14px; border: 0; background: var(--panel); font-size: 13px; font-weight: 600; cursor: pointer; color: var(--texto); box-shadow: 0 2px 8px rgba(0,0,0,.03); }
.r-tipo-btn.activo { background: var(--negro); color: #fff; }

/* ───────── VARIOS ───────── */
.vacio { text-align: center; padding: 36px 22px; color: var(--texto-suave); font-size: 14px; }
.toast { position: fixed; bottom: 96px; left: 50%; transform: translateX(-50%); background: var(--negro); color: #fff; padding: 13px 24px; border-radius: 999px; font-size: 14px; z-index: 9999; box-shadow: 0 10px 28px rgba(0,0,0,.3); animation: toast-in .3s var(--ease-out); }
@keyframes toast-in { from { opacity: 0; transform: translateX(-50%) translateY(10px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

/* ═══════════ TEMA CÁLIDO ═══════════ */
.tema-calido { --fondo: #f7f0e8; --marca: #ff8c42; --marca-2: #ffa563; --marca-tinta: #fff; --negro: #2a1f17; --acento: #2a1f17; --acento-fuerte: #d63f1e; --acento-fuerte2: #f0913a; }
.tema-calido .btn-dorado, .tema-calido .r-plato-pedir, .tema-calido .r-btn-add-detalle, .tema-calido .r-carrito-cant { box-shadow: 0 6px 20px rgba(255,140,66,.45); }
.tema-calido .r-btn-add-flecha { background: #fff; }
.tema-calido .r-btn-add-flecha svg { stroke: var(--marca); }

/* ═══════════ TEMA OSCURO ═══════════ */
.tema-oscuro { --fondo: #14120d; --panel: #211e17; --panel-2: #1a1812; --texto: #f5efe2; --texto-suave: #9a8f7a; --marca: #d4a04a; --marca-2: #e8c170; --marca-tinta: #1a1208; --negro: #0c0b08; --acento: #0c0b08; --acento-fuerte: #f0a54a; --acento-fuerte2: #ffce85; --linea: rgba(255,255,255,.08); --sombra-card: 0 10px 30px rgba(0,0,0,.4); }
.tema-oscuro .r-cat-chip.activa { background: var(--marca); color: var(--marca-tinta); }
.tema-oscuro .btn-dorado, .tema-oscuro .r-plato-pedir, .tema-oscuro .r-btn-add-detalle, .tema-oscuro .r-carrito-cant { box-shadow: 0 6px 20px rgba(212,160,74,.4); }
.tema-oscuro .r-carrito-flotante { background: var(--panel); }
.tema-oscuro .r-tipo-btn.activo { background: var(--marca); color: var(--marca-tinta); }

/* ═══════════ SUPERADMIN / LOGIN / ADMIN ═══════════ */
.sa-wrap, .login-centro { max-width: 560px; margin: 0 auto; padding: 30px 20px; }
.login-centro { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.login-card { background: var(--panel); border-radius: 24px; padding: 30px; box-shadow: var(--sombra-card); width: 100%; max-width: 380px; }
.login-card h1 { font-family: var(--font-display); font-size: 24px; margin-bottom: 4px; }
.login-card p { color: var(--texto-suave); font-size: 13px; margin-bottom: 20px; }
.login-err { color: var(--err); font-size: 13px; margin-top: 10px; text-align: center; }
.sa-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.sa-header h1 { font-family: var(--font-display); font-size: 24px; }
.sa-header p { color: var(--texto-suave); font-size: 13px; }
.form-admin { background: var(--panel); border-radius: 20px; padding: 20px; margin-bottom: 24px; box-shadow: var(--sombra-card); }
.form-admin h3 { font-family: var(--font-display); margin-bottom: 14px; }
.campo { margin-bottom: 12px; }
.campo label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.campo input, .campo select, .select-nativo, .campo textarea { width: 100%; min-height: 46px; border: 1px solid var(--linea); border-radius: 12px; padding: 12px; font-size: 14px; font-family: var(--font-body); background: var(--panel-2); color: var(--texto); outline: none; box-sizing: border-box; }
.campo select { -webkit-appearance: none; appearance: none; cursor: pointer; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%23999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>'); background-repeat: no-repeat; background-position: right 12px center; padding-right: 40px; }
.campo input:focus, .campo select:focus, .select-nativo:focus { border-color: var(--marca); }
.btn-add { width: 100%; height: 48px; margin-top: 6px; }
.seccion-label { padding: 8px 0 12px; }
.seccion-label h3 { font-family: var(--font-display); font-size: 18px; }
.card-admin { background: var(--panel); border-radius: 16px; padding: 16px; margin-bottom: 12px; box-shadow: var(--sombra-card); }
.card-admin .top { display: flex; justify-content: space-between; gap: 10px; }
.card-admin h4 { font-size: 15px; margin-bottom: 4px; }
.card-admin .det { font-size: 12px; color: var(--texto-suave); line-height: 1.5; }
.mini-btn { padding: 8px 14px; border-radius: 10px; border: 0; background: var(--marca); color: var(--marca-tinta); font-size: 12px; font-weight: 700; cursor: pointer; }
.mini-del { background: var(--err); color: #fff; }
.plan-badge { font-size: 9px; padding: 2px 8px; border-radius: 999px; font-weight: 800; }
.plan-basico { background: rgba(138,133,122,.2); color: var(--texto-suave); }
.plan-pro { background: var(--marca); color: var(--marca-tinta); }
.plan-premium { background: var(--negro); color: #fff; }
.acciones-rest { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.select-plan { padding: 7px 10px; border-radius: 10px; border: 1px solid var(--linea); background: var(--panel-2); color: var(--texto); font-size: 12px; }
.admin-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 16px 20px 0; }
.admin-tabs::-webkit-scrollbar { display: none; }
.admin-tab { flex-shrink: 0; padding: 10px 18px; border-radius: 999px; border: 0; background: var(--panel); color: var(--texto-suave); font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: var(--sombra-card); }
.admin-tab.activo { background: var(--negro); color: #fff; }
.admin-panel { display: none; padding: 16px 20px; }
.admin-panel.activo { display: block; }

/* ═══════════════════════════════════════════
   PANTALLAS (bienvenida + menú)
   ═══════════════════════════════════════════ */
.app-rest { width: 100%; max-width: 100%; min-height: 100vh; position: relative; overflow-x: hidden; }
.pantalla-rest { display: none; }
.pantalla-rest.activa { display: block; }
#pantallaMenu.activa { min-height: 100vh; }

/* ───────── BIENVENIDA ───────── */
#pantallaBienvenida { position: fixed; inset: 0; overflow: hidden; }
.bienvenida-fondo { position: absolute; inset: 0; background-color: var(--marca); background-size: cover; background-position: center; }
.bienvenida-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,.25) 60%, rgba(0,0,0,.4)); }
.bienvenida-contenido { position: relative; z-index: 2; height: 100vh; height: 100dvh; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 28px calc(env(safe-area-inset-bottom) + 44px); }
.bienvenida-logo { width: 90px; height: 90px; border-radius: 26px; background: var(--marca); display: grid; place-items: center; margin-bottom: auto; margin-top: calc(env(safe-area-inset-top) + 50px); box-shadow: 0 16px 40px rgba(0,0,0,.3); overflow: hidden; }
.bienvenida-logo img { width: 100%; height: 100%; object-fit: cover; }
.bienvenida-texto { margin-bottom: 30px; }
.bienvenida-texto h1 { font-family: var(--font-display); font-size: 56px; line-height: .96; font-weight: 800; color: #fff; letter-spacing: -1.5px; margin-bottom: 14px; text-shadow: 0 4px 30px rgba(0,0,0,.5); }
.bienvenida-texto p { font-size: 16px; color: rgba(255,255,255,.88); line-height: 1.5; }
.btn-continuar { position: relative; width: 100%; height: 66px; border: 0; cursor: pointer; border-radius: 999px; background: rgba(255,255,255,.14); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.22); display: flex; align-items: center; padding: 8px; overflow: hidden; transition: transform .16s var(--ease-out); }
.btn-continuar:active { transform: scale(.97); }
.btn-cont-glow { position: absolute; left: 8px; top: 8px; width: 50px; height: 50px; border-radius: 50%; background: var(--marca); filter: blur(14px); opacity: .9; animation: cont-pulso 2.4s ease-in-out infinite; }
@keyframes cont-pulso { 0%,100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.25); opacity: 1; } }
.btn-cont-check { position: relative; z-index: 2; width: 50px; height: 50px; border-radius: 50%; flex-shrink: 0; background: var(--marca); color: var(--marca-tinta); display: grid; place-items: center; box-shadow: 0 4px 16px rgba(0,0,0,.25); transition: transform .25s var(--ease-out); }
.btn-cont-texto { flex: 1; text-align: center; color: #fff; font-weight: 700; font-size: 17px; z-index: 2; transition: opacity .2s; }
.btn-cont-flechas { color: rgba(255,255,255,.55); font-size: 20px; font-weight: 700; padding-right: 16px; z-index: 2; animation: cont-flechas 1.5s ease-in-out infinite; }
@keyframes cont-flechas { 0%,100% { opacity: .4; transform: translateX(0); } 50% { opacity: 1; transform: translateX(4px); } }
.btn-continuar.cargando { pointer-events: none; overflow: visible; }
.btn-continuar.cargando .btn-cont-check { animation: cont-viaja .6s var(--ease-elegante) forwards; }
.btn-continuar.cargando .btn-cont-texto, .btn-continuar.cargando .btn-cont-flechas { opacity: 0; }
@keyframes cont-viaja { 0% { transform: translateX(0); } 100% { transform: translateX(calc(100vw - 120px)); opacity: 0; } }

/* ───────── SCROLL HORIZONTAL (más pedidos, noticias, testimonios) ───────── */
.r-scroll-h { display: flex; gap: 14px; overflow-x: auto; padding: 4px 22px 8px; }
.r-scroll-h::-webkit-scrollbar { display: none; }

/* Más pedidos (mini cards) */
.r-mini-card { flex-shrink: 0; width: 112px; background: var(--panel); border-radius: var(--r-medio); overflow: hidden; box-shadow: var(--sombra-card); cursor: pointer; transition: transform .2s var(--ease-out); }
.r-mini-card:active { transform: scale(.96); }
.r-mini-foto { width: 100%; height: 80px; overflow: hidden; }
.r-mini-foto img { width: 100%; height: 100%; object-fit: cover; }
.r-mini-info { padding: 9px 10px; }
.r-mini-info strong { display: block; font-size: 12px; font-weight: 700; margin-bottom: 4px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-mini-info span { font-size: 12px; font-weight: 800; color: var(--marca-tinta); background: var(--marca); padding: 2px 8px; border-radius: 999px; }

/* Noticias */
.r-noticia-card { flex-shrink: 0; width: 260px; background: var(--panel); border-radius: var(--r-medio); overflow: hidden; box-shadow: var(--sombra-card); }
.r-noticia-foto { width: 100%; height: 130px; overflow: hidden; }
.r-noticia-foto img { width: 100%; height: 100%; object-fit: cover; }
.r-noticia-info { padding: 14px 16px; }
.r-noticia-info strong { display: block; font-family: var(--font-display); font-size: 16px; margin-bottom: 5px; }
.r-noticia-info p { font-size: 13px; color: var(--texto-suave); line-height: 1.45; }

/* Razones (por qué elegirnos) */
.r-razones { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 4px 22px 8px; }
.r-razon-card { background: var(--panel); border-radius: var(--r-medio); padding: 18px 16px; text-align: center; box-shadow: var(--sombra-card); }
.r-razon-icono { font-size: 32px; margin-bottom: 10px; }
.r-razon-card strong { display: block; font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.r-razon-card p { font-size: 12px; color: var(--texto-suave); line-height: 1.4; }

/* Quiénes somos */
.r-quienes { margin: 4px 22px 8px; background: var(--panel); border-radius: var(--r-grande); padding: 22px; font-size: 14px; line-height: 1.7; color: var(--texto-suave); box-shadow: var(--sombra-card); }

/* Testimonios */
.r-testi-card { flex-shrink: 0; width: 280px; background: var(--panel); border-radius: var(--r-grande); padding: 22px; box-shadow: var(--sombra-card); }
.r-testi-estrellas { color: #ffc043; font-size: 16px; margin-bottom: 10px; letter-spacing: 2px; }
.r-testi-card p { font-size: 14px; line-height: 1.6; margin-bottom: 12px; font-style: italic; }
.r-testi-autor { font-size: 13px; font-weight: 700; color: var(--marca-tinta); }
.tema-oscuro .r-testi-autor, .tema-calido .r-testi-autor { color: var(--texto); }

/* ───────── FOOTER ───────── */
.r-footer { margin: 26px 22px 12px; padding: 24px 20px; background: var(--negro); border-radius: var(--r-grande); text-align: center; color: #fff; }
.r-footer-logo { width: 52px; height: 52px; border-radius: 16px; background: var(--marca); display: grid; place-items: center; margin: 0 auto 12px; overflow: hidden; }
.r-footer-logo img { width: 100%; height: 100%; object-fit: cover; }
.r-footer > strong { font-family: var(--font-display); font-size: 20px; display: block; margin-bottom: 6px; }
.r-footer > p { font-size: 12px; color: rgba(255,255,255,.6); line-height: 1.5; margin-bottom: 14px; }
.r-footer-contacto { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.r-footer-contacto span { font-size: 12px; color: rgba(255,255,255,.75); }
.r-footer-redes { display: flex; gap: 8px; justify-content: center; margin-bottom: 16px; flex-wrap: wrap; }
.r-footer-redes a { color: var(--marca-tinta); background: var(--marca); padding: 8px 16px; border-radius: 999px; font-size: 12px; font-weight: 700; text-decoration: none; }
.r-footer-creditos { padding-top: 14px; border-top: 1px solid rgba(255,255,255,.1); }
.r-footer-creditos p { font-size: 11px; color: rgba(255,255,255,.55); margin-bottom: 5px; }
.r-footer-creditos strong { color: rgba(255,255,255,.85); }
.r-footer-creditos a { color: var(--marca); font-size: 13px; font-weight: 700; text-decoration: none; }

/* ═══════════════════════════════════════════
   IMÁGENES DE FONDO POR TEMA (bienvenida)
   ═══════════════════════════════════════════ */
/* Si el restaurante NO subió portada, usar una imagen acorde al tema */
.tema-fresco .bienvenida-fondo:not([style*="url"]) {
  background-image: url('https://images.unsplash.com/photo-1512621776951-a57141f2eefd?auto=format&fit=crop&w=900&q=80');
}
.tema-calido .bienvenida-fondo:not([style*="url"]) {
  background-image: url('https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?auto=format&fit=crop&w=900&q=80');
}
.tema-oscuro .bienvenida-fondo:not([style*="url"]) {
  background-image: url('https://images.unsplash.com/photo-1414235077428-338989a2e8c0?auto=format&fit=crop&w=900&q=80');
}
.bienvenida-fondo { background-size: cover; background-position: center; }

/* ═══════════════════════════════════════════
   RESPONSIVE — DESKTOP (marco tipo móvil centrado, como barbería)
   ═══════════════════════════════════════════ */
@media (min-width: 768px) {
  body { display: grid; place-items: center; min-height: 100vh; background: #1a1814; }
  body::before { content: ""; position: fixed; inset: 0; background: radial-gradient(circle at 30% 20%, rgba(197,240,72,.08), transparent 50%), radial-gradient(circle at 70% 80%, rgba(255,140,66,.06), transparent 50%); pointer-events: none; }
  .app-rest {
    width: 420px; max-width: 420px; height: 880px; max-height: 94vh;
    border-radius: 42px; overflow: hidden; position: relative;
    box-shadow: 0 40px 100px rgba(0,0,0,.6), 0 0 0 10px rgba(0,0,0,.3), 0 0 0 11px rgba(255,255,255,.06);
    background: var(--fondo);
  }
  .pantalla-rest.scroll-y { height: 100%; overflow-y: auto; }
  #pantallaBienvenida { position: absolute; border-radius: 42px; }
  .bienvenida-contenido { height: 100%; }
  .r-carrito-flotante { position: absolute; left: 22px; right: 22px; }
  .r-overlay { position: absolute; border-radius: 42px; }
  .r-sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 88%; border-radius: 28px 28px 42px 42px; }
  .r-sheet:not(.abierto) { transform: translateY(110%); visibility: hidden; }
  .r-sheet.abierto { visibility: visible; }
  .r-navbar { position: absolute; left: 0; right: 0; bottom: 0; height: 58px; padding-bottom: 0; border-radius: 0 0 42px 42px; }
  .r-navbar .r-nav-btn svg { width: 19px; height: 19px; }
  .r-navbar .r-nav-btn span { font-size: 10px; }
  #pantallaMenu { padding-bottom: 62px; }
}

/* Pantallas muy grandes: un poco más alto */
@media (min-width: 768px) and (min-height: 1000px) {
  .app-rest { height: 960px; }
}

/* Móvil pequeño: ajustar tipografía del hero */
@media (max-width: 360px) {
  .r-hero-titulo-grande { font-size: 44px; }
  .bienvenida-texto h1 { font-size: 46px; }
  .r-platos { gap: 14px; }
}

/* ═══════════ ÍCONOS SVG EN CATEGORÍAS Y RAZONES ═══════════ */
.r-cat-chip .cat-ico { display: inline-flex; width: 18px; height: 18px; }
.r-cat-chip .cat-ico svg { width: 18px; height: 18px; }
.r-razon-icono svg { width: 34px; height: 34px; color: var(--marca-tinta); }
.tema-oscuro .r-razon-icono svg, .tema-calido .r-razon-icono svg { color: var(--marca); }
.r-razon-icono { display: flex; justify-content: center; }
/* Selector de íconos en el admin */
.icono-selector { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.icono-opcion { aspect-ratio: 1; border: 1px solid var(--linea); border-radius: 12px; background: var(--panel-2); display: grid; place-items: center; cursor: pointer; transition: all .15s; }
.icono-opcion svg { width: 22px; height: 22px; color: var(--texto); }
.icono-opcion.activo { background: var(--negro); border-color: var(--negro); }
.icono-opcion.activo svg { color: #fff; }

/* ═══════════════════════════════════════════
   BARRA DE NAVEGACIÓN INFERIOR
   ═══════════════════════════════════════════ */
.r-navbar { position: fixed; left: 0; right: 0; bottom: 0; height: calc(64px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--panel); border-top: 1px solid var(--linea); display: flex; align-items: stretch; z-index: 60; box-shadow: 0 -4px 20px rgba(0,0,0,.06); transition: transform .3s var(--ease-out); }
/* Ocultar la barra cuando la bienvenida está activa */
body:has(#pantallaBienvenida.activa) .r-navbar,
body.en-bienvenida .r-navbar { transform: translateY(120%); }
body:has(#pantallaBienvenida.activa) .r-carrito-flotante,
body.en-bienvenida .r-carrito-flotante { transform: translateY(200px); }
.r-nav-btn { flex: 1; border: 0; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; cursor: pointer; color: var(--texto-suave); transition: color .2s; }
.r-nav-btn svg { width: 22px; height: 22px; }
.r-nav-btn span { font-size: 11px; font-weight: 600; }
.r-nav-btn.activo { color: var(--marca-tinta); }
.tema-oscuro .r-nav-btn.activo, .tema-calido .r-nav-btn.activo { color: var(--marca); }
/* Dejar espacio para la navbar al final del menú */
#pantallaMenu { padding-bottom: 70px; }
.r-carrito-flotante { bottom: calc(env(safe-area-inset-bottom) + 78px); }

/* ═══════════ SHEET CATEGORÍAS (grid) ═══════════ */
.r-cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding-bottom: 20px; }
.r-cat-grid-item { background: var(--panel); border: 1px solid var(--linea); border-radius: 18px; padding: 18px 10px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--texto); transition: all .2s; }
.r-cat-grid-item.activo { background: var(--negro); color: #fff; }
.r-cat-grid-ico { width: 28px; height: 28px; display: inline-flex; }
.r-cat-grid-ico svg { width: 28px; height: 28px; }

/* ═══════════ OFERTAS ═══════════ */
.r-oferta-card { flex-shrink: 0; width: 260px; background: var(--panel); border-radius: var(--r-medio); overflow: hidden; box-shadow: var(--sombra-card); }
.r-oferta-foto { width: 100%; height: 130px; position: relative; overflow: hidden; }
.r-oferta-foto img { width: 100%; height: 100%; object-fit: cover; }
.r-oferta-badge { position: absolute; top: 10px; left: 10px; background: var(--marca); color: var(--marca-tinta); font-size: 11px; font-weight: 800; padding: 4px 12px; border-radius: 999px; text-transform: uppercase; }
.r-oferta-info { padding: 14px 16px; }
.r-oferta-info strong { display: block; font-family: var(--font-display); font-size: 17px; margin-bottom: 4px; }
.r-oferta-info p { font-size: 12px; color: var(--texto-suave); line-height: 1.4; margin-bottom: 8px; }
.r-oferta-precios { display: flex; align-items: center; gap: 8px; }
.r-oferta-precio { font-size: 20px; font-weight: 800; color: var(--marca-tinta); }
.tema-oscuro .r-oferta-precio, .tema-calido .r-oferta-precio { color: var(--marca); }
.r-oferta-antes { font-size: 14px; color: var(--texto-suave); text-decoration: line-through; }

/* ═══════════ INFO DEL SITIO ═══════════ */
.r-info-logo { width: 80px; height: 80px; border-radius: 24px; background: var(--marca); display: grid; place-items: center; margin: 0 auto 16px; overflow: hidden; }
.r-info-logo img { width: 100%; height: 100%; object-fit: cover; }
.r-info-logo svg { width: 40px; height: 40px; color: var(--marca-tinta); }
.r-info-nombre { font-family: var(--font-display); font-size: 24px; font-weight: 800; text-align: center; margin-bottom: 8px; }
.r-info-desc { font-size: 14px; color: var(--texto-suave); line-height: 1.6; text-align: center; margin-bottom: 20px; }
.r-info-datos { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.r-info-fila { display: flex; gap: 14px; align-items: center; background: var(--panel); padding: 14px 16px; border-radius: 16px; }
.r-info-ico { width: 24px; height: 24px; color: var(--marca-tinta); flex-shrink: 0; }
.tema-oscuro .r-info-ico, .tema-calido .r-info-ico { color: var(--marca); }
.r-info-ico svg { width: 24px; height: 24px; }
.r-info-fila div { display: flex; flex-direction: column; }
.r-info-fila strong { font-size: 14px; }
.r-info-fila span { font-size: 13px; color: var(--texto-suave); }
.r-info-botones { display: flex; gap: 10px; flex-wrap: wrap; padding-bottom: 20px; }
.r-info-btn { flex: 1; text-align: center; background: var(--marca); color: var(--marca-tinta); padding: 14px; border-radius: 14px; font-weight: 700; text-decoration: none; font-size: 14px; }

/* ═══════════ ADICIONALES EN DETALLE ═══════════ */
.r-detalle-extras { margin-bottom: 18px; }
.r-extras-titulo { font-weight: 700; font-size: 15px; margin-bottom: 10px; }
.r-extra-item { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--panel); border-radius: 14px; margin-bottom: 8px; cursor: pointer; }
.r-extra-item span:first-child { flex: 1; font-size: 14px; }
.r-extra-precio { font-size: 13px; font-weight: 700; color: var(--marca-tinta); }
.tema-oscuro .r-extra-precio, .tema-calido .r-extra-precio { color: var(--marca); }
.r-extra-item input { width: 20px; height: 20px; accent-color: var(--negro); }

/* En desktop, el carrito sobre la navbar */
@media (min-width: 768px) {
  .r-carrito-flotante { position: absolute; bottom: 88px; }
}

/* ═══════════ ESTADO ABIERTO/CERRADO ═══════════ */
.r-estado { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 999px; margin-top: 3px; }
.r-estado.abierto { background: rgba(52,199,89,.15); color: #2d9d4f; }
.r-estado.cerrado { background: rgba(255,59,48,.12); color: #d9342b; }
.r-estado-punto { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.r-estado.abierto .r-estado-punto { animation: punto-vivo 1.6s ease-in-out infinite; }
@keyframes punto-vivo { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

/* ═══════════ POPUP DE OFERTAS ═══════════ */
.r-popup-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.r-popup-overlay.visible { opacity: 1; visibility: visible; }
.r-popup-card { width: 100%; max-width: 360px; max-height: 86vh; overflow-y: auto; background: var(--fondo); border-radius: 28px; overflow-x: hidden; position: relative; transform: scale(.85) translateY(20px); transition: transform .35s var(--ease-elegante); box-shadow: 0 30px 80px rgba(0,0,0,.4); }
.r-popup-card::-webkit-scrollbar { display: none; }
.r-popup-oferta:not(:last-child) { border-bottom: 8px solid var(--panel-2); }
.r-popup-overlay.visible .r-popup-card { transform: scale(1) translateY(0); }
.r-popup-cerrar { position: absolute; top: 14px; right: 14px; z-index: 3; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(0,0,0,.4); color: #fff; display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(4px); }
.r-popup-header { position: absolute; top: 16px; left: 16px; z-index: 3; }
.r-popup-tag { background: var(--marca); color: var(--marca-tinta); font-size: 11px; font-weight: 800; padding: 5px 14px; border-radius: 999px; text-transform: uppercase; letter-spacing: .5px; }
.r-popup-foto { width: 100%; height: 200px; position: relative; overflow: hidden; }
.r-popup-foto img { width: 100%; height: 100%; object-fit: cover; }
.r-popup-badge { position: absolute; bottom: 14px; right: 14px; background: var(--negro); color: #fff; font-size: 13px; font-weight: 800; padding: 6px 14px; border-radius: 999px; }
.r-popup-contenido { padding: 22px 24px 26px; text-align: center; }
.r-popup-titulo { font-family: var(--font-display); font-size: 24px; font-weight: 800; margin-bottom: 8px; }
.r-popup-desc { font-size: 14px; color: var(--texto-suave); line-height: 1.5; margin-bottom: 16px; }
.r-popup-precios { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 8px; }
.r-popup-precio { font-size: 32px; font-weight: 800; color: var(--marca-tinta); }
.tema-oscuro .r-popup-precio, .tema-calido .r-popup-precio { color: var(--marca); }
.r-popup-antes { font-size: 18px; color: var(--texto-suave); text-decoration: line-through; }
.r-popup-mas { font-size: 13px; color: var(--texto-suave); margin-bottom: 18px; }
.r-popup-btn { width: 100%; height: 52px; margin-top: 12px; }

/* ═══════════ PAGINACIÓN (panel admin) ═══════════ */
.paginacion { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding: 8px 0; }
.pag-btn { border: 1px solid var(--linea); background: var(--panel); color: var(--texto); padding: 9px 16px; border-radius: 12px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all .15s; }
.pag-btn:hover:not(:disabled) { background: var(--negro); color: #fff; border-color: var(--negro); }
.pag-btn:disabled { opacity: .4; cursor: not-allowed; }
.pag-info { font-size: 13px; color: var(--texto-suave); font-weight: 600; }

/* ═══════════ SKELETONS (carga) ═══════════ */
.r-plato-skeleton { background: var(--panel); border-radius: var(--r-grande); padding: 22px; min-height: 130px; position: relative; overflow: hidden; box-shadow: var(--sombra-card); }
.sk-linea { height: 14px; border-radius: 7px; background: var(--panel-2); margin-bottom: 10px; position: relative; overflow: hidden; }
.sk-titulo { width: 55%; height: 18px; }
.sk-desc { width: 70%; }
.sk-precio { width: 35%; height: 20px; margin-top: 14px; }
.sk-foto { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 90px; height: 90px; border-radius: 50%; background: var(--panel-2); }
.sk-chip { display: inline-block; width: 90px; height: 38px; border-radius: 999px; background: var(--panel-2); margin-right: 10px; position: relative; overflow: hidden; }
/* Shimmer */
.sk-linea::after, .sk-foto::after, .sk-chip::after, .r-plato-skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform: translateX(-100%); animation: shimmer 1.4s infinite;
}
.tema-oscuro .sk-linea::after, .tema-oscuro .sk-foto::after, .tema-oscuro .sk-chip::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
}
@keyframes shimmer { 100% { transform: translateX(100%); } }
.r-plato-skeleton::after { animation-delay: .1s; }

/* ═══════════════════════════════════════════
   PANEL DE COCINA
   ═══════════════════════════════════════════ */
.cocina-wrap { min-height: 100vh; padding: 20px; max-width: 1300px; margin: 0 auto; }
.cocina-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; flex-wrap: wrap; gap: 12px; }
.cocina-header h1 { font-family: var(--font-display); font-size: 30px; font-weight: 800; }
.cocina-header p { font-size: 14px; color: var(--texto-suave); }
.cocina-acciones { display: flex; align-items: center; gap: 12px; }
.cocina-estado-live { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #2d9d4f; background: rgba(52,199,89,.12); padding: 6px 14px; border-radius: 999px; }
.live-punto { width: 8px; height: 8px; border-radius: 50%; background: #2d9d4f; animation: punto-vivo 1.6s ease-in-out infinite; }

.cocina-columnas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cocina-col { background: var(--panel-2); border-radius: 20px; overflow: hidden; min-height: 400px; }
.cocina-col-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; color: #fff; }
.cocina-col-head h3 { font-size: 16px; font-weight: 700; }
.cocina-col-head.recibido { background: linear-gradient(135deg, #ff8c42, #ff6b35); }
.cocina-col-head.preparando { background: linear-gradient(135deg, #4a90d9, #3570b8); }
.cocina-col-head.listo { background: linear-gradient(135deg, #34c759, #28a347); }
.cocina-contador { background: rgba(255,255,255,.25); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px; }
.cocina-col-body { padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.cocina-vacio { text-align: center; color: var(--texto-suave); font-size: 13px; padding: 30px 0; }

.cocina-card { background: var(--panel); border-radius: 16px; padding: 14px 16px; box-shadow: var(--sombra-card); animation: r-sube .4s var(--ease-out) backwards; }
.cocina-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.cocina-num { font-family: var(--font-display); font-size: 20px; font-weight: 800; }
.cocina-tiempo { font-size: 12px; font-weight: 700; color: var(--texto-suave); background: var(--panel-2); padding: 3px 10px; border-radius: 999px; }
.cocina-tipo { font-size: 13px; font-weight: 600; color: var(--marca-tinta); margin-bottom: 10px; }
.tema-oscuro .cocina-tipo { color: var(--marca); }
.cocina-items { list-style: none; margin: 0 0 10px; padding: 0; }
.cocina-items li { font-size: 14px; padding: 4px 0; border-bottom: 1px solid var(--linea); }
.cocina-items .qty { font-weight: 800; color: var(--texto); }
.cocina-notas { font-size: 12px; background: #fff8e6; color: #8a6d00; padding: 8px 10px; border-radius: 10px; margin-bottom: 10px; }
.tema-oscuro .cocina-notas { background: rgba(255,200,0,.1); color: #ffd75e; }
.cocina-card-acciones { display: flex; gap: 8px; }
.cocina-btn-avanzar { flex: 1; border: 0; background: var(--negro); color: #fff; padding: 11px; border-radius: 12px; font-weight: 700; font-size: 13px; cursor: pointer; font-family: inherit; transition: transform .15s; }
.cocina-btn-avanzar:active { transform: scale(.96); }
.cocina-btn-cancelar { border: 1px solid var(--linea); background: var(--panel); color: #d9342b; width: 42px; border-radius: 12px; cursor: pointer; font-weight: 700; }

@media (max-width: 720px) {
  .cocina-columnas { grid-template-columns: 1fr; }
  .cocina-col { min-height: auto; }
}

/* ═══════════ BADGES DIETÉTICOS ═══════════ */
.r-plato-badges { display: flex; gap: 5px; margin-bottom: 6px; flex-wrap: wrap; }
.r-badge-diet { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: 8px; }
.r-badge-diet svg { width: 13px; height: 13px; }
.r-badge-diet.veg, .r-badge-diet.vegano { background: rgba(52,199,89,.14); color: #2d9d4f; }
.r-badge-diet.picante { background: rgba(255,59,48,.12); color: #d9342b; }
.r-badge-diet.singluten { background: rgba(255,159,10,.14); color: #c77800; }
.r-badge-diet.tiempo { background: var(--panel-2); color: var(--texto-suave); }
.r-plato-badges .r-badge-diet { padding: 2px 5px; }
.r-plato-badges .r-badge-diet span { display: none; }
/* En el detalle, mostrar con texto */
.r-detalle-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.r-detalle-meta .r-badge-diet { padding: 6px 12px; font-size: 13px; border-radius: 10px; }
.r-detalle-meta .r-badge-diet svg { width: 15px; height: 15px; }

/* ═══════════ FILTROS ═══════════ */
.r-filtros { display: flex; gap: 8px; overflow-x: auto; padding: 0 22px 8px; scrollbar-width: none; }
.r-filtros::-webkit-scrollbar { display: none; }
.r-filtro-chip { flex-shrink: 0; border: 1px solid var(--linea); background: var(--panel); color: var(--texto-suave); padding: 7px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all .15s; white-space: nowrap; }
.r-filtro-chip.activo { background: var(--marca); color: var(--marca-tinta); border-color: var(--marca); }
.tema-oscuro .r-filtro-chip.activo, .tema-calido .r-filtro-chip.activo { background: var(--marca); color: var(--marca-tinta); }

/* Checkboxes de badges en admin */
.badges-check { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.badge-check { display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 8px 12px; background: var(--panel-2); border-radius: 12px; cursor: pointer; }
.badge-check input { width: 18px; height: 18px; accent-color: var(--negro); }

/* ═══════════ HEADER GLASSMORPHISM ═══════════ */
.r-header { transition: background .3s, backdrop-filter .3s, box-shadow .3s; position: sticky; top: 0; z-index: 40; }
.r-header.scrolled { background: rgba(255,255,255,.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 4px 24px rgba(0,0,0,.06); }
.tema-oscuro .r-header.scrolled { background: rgba(26,24,20,.72); }
.tema-calido .r-header.scrolled { background: rgba(255,247,237,.78); }

/* ═══════════ CONFIRMACIÓN DE PEDIDO ═══════════ */
.r-confirmacion { position: fixed; inset: 0; background: rgba(0,0,0,.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 300; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.r-confirmacion.visible { opacity: 1; visibility: visible; }
.r-confirmacion-card { background: var(--fondo); border-radius: 28px; padding: 40px 36px; text-align: center; max-width: 320px; transform: scale(.8); transition: transform .4s var(--ease-elegante); }
.r-confirmacion.visible .r-confirmacion-card { transform: scale(1); }
.r-confirmacion-check { width: 90px; height: 90px; margin: 0 auto 20px; }
.r-confirmacion-check svg { width: 100%; height: 100%; }
.r-conf-circulo { stroke: var(--marca); stroke-width: 3; stroke-dasharray: 151; stroke-dashoffset: 151; animation: conf-circulo .5s var(--ease-out) forwards; }
.r-conf-tick { stroke: var(--marca); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: conf-tick .35s .45s var(--ease-out) forwards; }
.tema-oscuro .r-conf-circulo, .tema-oscuro .r-conf-tick { stroke: var(--marca); }
@keyframes conf-circulo { to { stroke-dashoffset: 0; } }
@keyframes conf-tick { to { stroke-dashoffset: 0; } }
.r-confirmacion-card h2 { font-family: var(--font-display); font-size: 24px; font-weight: 800; margin-bottom: 8px; animation: r-sube .4s .5s var(--ease-out) backwards; }
.r-confirmacion-card p { font-size: 14px; color: var(--texto-suave); line-height: 1.5; animation: r-sube .4s .6s var(--ease-out) backwards; }

/* ═══════════════════════════════════════════
   DASHBOARD ADMIN
   ═══════════════════════════════════════════ */
.dash-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 18px; }
.dash-card { background: var(--panel); border-radius: 18px; padding: 18px; box-shadow: var(--sombra-card); display: flex; flex-direction: column; gap: 6px; }
.dash-card-alerta { background: linear-gradient(135deg, var(--marca), var(--acento)); }
.dash-card-alerta .dash-label, .dash-card-alerta .dash-valor { color: var(--marca-tinta); }
.dash-label { font-size: 12px; color: var(--texto-suave); font-weight: 600; }
.dash-valor { font-family: var(--font-display); font-size: 26px; font-weight: 800; }
.dash-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.dash-bloque { background: var(--panel); border-radius: 18px; padding: 18px; box-shadow: var(--sombra-card); }
.dash-bloque h3 { font-size: 15px; font-weight: 700; margin-bottom: 16px; }
.dash-chart { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; height: 140px; }
.dash-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.dash-bar { width: 100%; max-width: 32px; background: linear-gradient(to top, var(--marca), var(--acento)); border-radius: 6px 6px 0 0; min-height: 4px; transition: height .5s var(--ease-out); }
.dash-bar-col span { font-size: 11px; color: var(--texto-suave); }
.dash-top-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linea); }
.dash-top-item:last-child { border-bottom: 0; }
.dash-top-pos { width: 24px; height: 24px; border-radius: 50%; background: var(--negro); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 800; flex-shrink: 0; }
.dash-top-info { flex: 1; min-width: 0; }
.dash-top-info strong { font-size: 13px; display: block; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-top-barra { height: 6px; background: var(--panel-2); border-radius: 999px; overflow: hidden; }
.dash-top-barra div { height: 100%; background: var(--marca); border-radius: 999px; }
.dash-top-num { font-weight: 800; font-size: 15px; flex-shrink: 0; }
.dash-totales { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dash-totales > div { background: var(--panel); border-radius: 16px; padding: 16px; box-shadow: var(--sombra-card); }
.dash-totales strong { display: block; font-family: var(--font-display); font-size: 20px; margin-top: 4px; }
@media (max-width: 600px) {
  .dash-fila { grid-template-columns: 1fr; }
}

/* ═══════════ TEXTURA DE FONDO SUTIL ═══════════ */
#pantallaMenu::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(circle at 15% 20%, var(--marca) 0, transparent 8%),
    radial-gradient(circle at 85% 60%, var(--acento) 0, transparent 10%),
    radial-gradient(circle at 50% 90%, var(--marca) 0, transparent 7%);
  opacity: .04;
}
/* Patrón de puntos muy sutil */
.app-rest { 
  background-color: transparent;
  background-image:
    linear-gradient(180deg, color-mix(in srgb, var(--fondo) 82%, transparent), color-mix(in srgb, var(--fondo) 94%, transparent)),
    radial-gradient(85% 55% at 88% -8%, color-mix(in srgb, var(--acento-fuerte) 20%, transparent), transparent 60%),
    radial-gradient(70% 50% at -12% 12%, color-mix(in srgb, var(--marca) 26%, transparent), transparent 55%),
    radial-gradient(90% 55% at 50% 118%, color-mix(in srgb, var(--acento-fuerte2) 15%, transparent), transparent 62%),
    radial-gradient(var(--linea) 0.5px, transparent 0.5px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 22px 22px;
}
.tema-oscuro .app-rest { background-image:
    linear-gradient(180deg, color-mix(in srgb, var(--fondo) 80%, transparent), color-mix(in srgb, var(--fondo) 92%, transparent)),
    radial-gradient(85% 55% at 88% -8%, color-mix(in srgb, var(--acento-fuerte) 16%, transparent), transparent 60%),
    radial-gradient(70% 50% at -12% 12%, color-mix(in srgb, var(--marca) 18%, transparent), transparent 55%),
    radial-gradient(rgba(255,255,255,.03) 0.5px, transparent 0.5px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 22px 22px;
}

/* ═══════════ ESTRELLAS DE CALIFICACIÓN ═══════════ */
.r-plato-rating { display: inline-flex; align-items: center; gap: 3px; margin-bottom: 6px; }
.r-plato-rating svg { width: 14px; height: 14px; color: #ffc043; fill: #ffc043; }
.r-plato-rating span { font-size: 13px; font-weight: 800; }
.r-plato-rating small { font-size: 11px; color: var(--texto-suave); }
.r-badge-diet.rating { background: rgba(255,192,67,.16); color: #c79100; }
.r-badge-diet.rating svg { fill: #ffc043; color: #ffc043; }

.r-detalle-calificar { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px; background: var(--panel); border-radius: 16px; margin-bottom: 16px; }
.r-calif-label { font-size: 13px; font-weight: 600; color: var(--texto-suave); }
.r-calif-estrellas { display: flex; gap: 4px; }
.r-calif-estrellas button { border: 0; background: none; font-size: 28px; color: var(--linea); cursor: pointer; padding: 0; line-height: 1; transition: transform .1s, color .15s; }
.r-calif-estrellas button:hover { transform: scale(1.15); }
.r-calif-estrellas button.activa { color: #ffc043; }
.r-calif-grande button { font-size: 34px; }

/* Calificación del restaurante en info */
.r-info-calif { text-align: center; padding: 20px; background: var(--panel); border-radius: 18px; margin-bottom: 16px; }
.r-info-calif-prom { display: inline-flex; align-items: center; gap: 4px; font-size: 18px; font-weight: 800; margin-bottom: 8px; }
.r-info-calif-prom svg { width: 18px; height: 18px; fill: #ffc043; color: #ffc043; }
.r-info-calif-prom small { font-size: 13px; color: var(--texto-suave); font-weight: 600; }
.r-info-calif-label { font-size: 13px; color: var(--texto-suave); margin-bottom: 10px; }
.r-info-calif .r-calif-estrellas { justify-content: center; }

/* Chip de favoritos */
.r-filtro-fav.activo { background: #ff4d6d !important; color: #fff !important; border-color: #ff4d6d !important; }

/* ═══════════ BOTÓN VER TODO EL MENÚ ═══════════ */
.r-ver-todo {
  display: flex !important; align-items: center; justify-content: center; gap: 10px;
  margin: 18px auto 6px; width: calc(100% - 44px); box-sizing: border-box; padding: 17px 22px;
  background: var(--negro); color: #fff; border: 0;
  border-radius: 16px; font-size: 15px; font-weight: 700; font-family: inherit;
  cursor: pointer; transition: all .18s var(--ease-out); box-shadow: 0 8px 24px rgba(0,0,0,.15);
}
.r-ver-todo:active { transform: scale(.98); }
.r-ver-todo .r-vt-flecha { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--marca); color: var(--marca-tinta); transition: transform .2s; flex-shrink: 0; }
.r-ver-todo:hover .r-vt-flecha { transform: translateX(3px); }
.r-ver-todo .r-vt-num { color: rgba(255,255,255,.55); font-weight: 600; }

/* Espaciador del footer (solo lo justo para la navbar) */
.r-footer-espaciador { height: 12px; }

/* Buscador con X */
.r-buscador { position: relative; }
.r-buscar-x { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border: 0; background: var(--panel-2); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--texto-suave); }

/* Sheet alto (menú completo) */
.r-sheet-alto { max-height: 90vh; }
.r-sheet-alto .r-sheet-body { overflow-y: auto; }
.r-sheet-alto .r-platos { padding-bottom: 20px; }

/* Footer: sin espacio extra abajo */

/* ═══════════ VISTA MENÚ COMPLETO (organizado por categorías) ═══════════ */
.r-mc-chips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 14px; position: sticky; top: 0; background: var(--fondo); z-index: 5; scrollbar-width: none; margin: 0 -4px; padding-left: 4px; padding-right: 4px; }
.r-mc-chips::-webkit-scrollbar { display: none; }
.r-mc-chip { flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--linea); background: var(--panel); color: var(--texto); padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; white-space: nowrap; transition: all .15s; }
.r-mc-chip.activo { background: var(--negro); color: #fff; border-color: var(--negro); }
.r-mc-chip-ico { display: inline-flex; width: 15px; height: 15px; }
.r-mc-chip-ico svg { width: 15px; height: 15px; }
.r-mc-seccion { margin-bottom: 28px; scroll-margin-top: 70px; }
.r-mc-titulo { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.r-mc-titulo-ico { width: 26px; height: 26px; color: var(--marca-tinta); display: inline-flex; }
.tema-oscuro .r-mc-titulo-ico, .tema-calido .r-mc-titulo-ico { color: var(--marca); }
.r-mc-titulo-ico svg { width: 26px; height: 26px; }
.r-mc-titulo h3 { font-family: var(--font-display); font-size: 20px; font-weight: 800; flex: 1; }
.r-mc-count { font-size: 12px; font-weight: 700; color: var(--texto-suave); background: var(--panel-2); padding: 3px 11px; border-radius: 999px; }

/* Botones de cerrar en confirmación de pedido */
.r-confirmacion-card { position: relative; }
.r-confirmacion-cerrar { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--panel-2); color: var(--texto-suave); display: grid; place-items: center; cursor: pointer; }
.r-confirmacion-btn { width: 100%; height: 50px; margin-top: 20px; }

/* Galería del carrusel (admin restaurante) */
.galeria-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 10px; }
.galeria-item { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; }
.galeria-item img { width: 100%; height: 100%; object-fit: cover; }
.galeria-borrar { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(0,0,0,.7); color: #fff; font-size: 16px; cursor: pointer; display: grid; place-items: center; line-height: 1; }

/* Variantes / tamaños en el detalle del plato */
.r-detalle-variantes { margin: 4px 0 8px; box-sizing: border-box; }
.r-detalle-variantes * { box-sizing: border-box; }
.r-variante-item { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: var(--panel); border: 2px solid transparent; border-radius: 14px; margin-bottom: 8px; cursor: pointer; transition: border-color .2s, background .2s; box-sizing: border-box; width: 100%; }
.r-variante-item:has(input:checked) { border-color: var(--marca, #A8E063); background: rgba(168,224,99,.08); }
.r-variante-nombre { flex: 1; font-weight: 600; font-size: 15px; }
.r-variante-precio { font-size: 14px; color: var(--marca, #7fb93f); font-weight: 700; }
.r-variante-item input[type="radio"] { width: 20px; height: 20px; accent-color: var(--marca, #A8E063); cursor: pointer; }

/* Botón y modal de comentar (cliente) */
.r-btn-comentar { background: var(--marca, #A8E063); color: var(--marca-tinta, #14210a); border: 0; border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: var(--font-body); }
.r-btn-comentar:active { transform: scale(.96); }
.r-modal-ov { position: fixed; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 20px; }
.r-modal { background: var(--fondo, #fff); border-radius: 24px; padding: 24px; width: 100%; max-width: 380px; box-shadow: 0 30px 80px rgba(0,0,0,.4); }
.r-modal h3 { font-size: 19px; font-weight: 800; margin-bottom: 14px; }
.r-modal-stars { display: flex; gap: 8px; justify-content: center; font-size: 36px; margin-bottom: 16px; cursor: pointer; }
.r-modal-stars span { color: #ddd; transition: transform .15s; }
.r-modal-stars span.on { color: #f5c542; }
.r-modal-stars span:active { transform: scale(1.3); }
.r-modal-input { width: 100%; box-sizing: border-box; border: 1px solid var(--linea); border-radius: 14px; padding: 13px 15px; font-size: 15px; margin-bottom: 10px; font-family: var(--font-body); background: var(--panel-2, #f7f7f7); color: var(--texto); outline: none; resize: none; }
.r-modal-input:focus { border-color: var(--marca, #A8E063); }
.r-modal-btns { display: flex; gap: 10px; margin-top: 6px; }
.r-modal-cancel, .r-modal-ok { flex: 1; height: 48px; border: 0; border-radius: 14px; font-size: 15px; font-weight: 700; cursor: pointer; font-family: var(--font-body); }
.r-modal-cancel { background: rgba(0,0,0,.06); color: var(--texto); }
.r-modal-ok { background: var(--marca, #A8E063); color: var(--marca-tinta, #14210a); }
.r-modal-ok:active, .r-modal-cancel:active { transform: scale(.97); }

/* ═══════════════════════════════════════════════════════════
   ✦ UPGRADE CINEMATOGRÁFICO PREMIUM — Menú gourmet editorial
   ═══════════════════════════════════════════════════════════ */

/* — Fondo con atmósfera y profundidad (malla de degradados + patrón) — */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(85% 55% at 88% -8%, color-mix(in srgb, var(--acento-fuerte) 22%, transparent), transparent 60%),
    radial-gradient(70% 50% at -12% 12%, color-mix(in srgb, var(--marca) 28%, transparent), transparent 55%),
    radial-gradient(90% 55% at 50% 118%, color-mix(in srgb, var(--acento-fuerte2) 16%, transparent), transparent 62%),
    radial-gradient(60% 40% at 15% 60%, color-mix(in srgb, var(--marca) 12%, transparent), transparent 50%);
}
/* Patrón de puntos + grano muy sutil */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image:
    radial-gradient(color-mix(in srgb, var(--texto) 5%, transparent) 1px, transparent 1.4px);
  background-size: 26px 26px;
}

/* — HERO cinematográfico con entrada escalonada — */
.r-hero { position: relative; padding-top: 8px; }
.r-hero-titulo-grande {
  font-size: 58px !important; letter-spacing: -2.5px !important;
  color: var(--texto) !important; -webkit-text-fill-color: currentColor !important;
}
/* Palabra destacada en color de marca con buen contraste */
.r-hero-titulo-grande .r-hero-linea:nth-child(2n) {
  background: linear-gradient(115deg, var(--acento-fuerte, #e8532b), var(--acento-fuerte2, #f0913a));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.r-hero-titulo-grande span, .r-hero-linea { display: inline-block; }
.r-hero-titulo-grande .r-hero-linea {
  opacity: 0; transform: translateY(40px) rotate(2deg);
  animation: heroReveal 1s var(--ease-elegante) forwards;
}
.r-hero-titulo-grande .r-hero-linea:nth-child(2) { animation-delay: .14s; }
@keyframes heroReveal { to { opacity: 1; transform: translateY(0) rotate(0); } }
.r-hero-sub-grande { opacity: 0; animation: fadeUp .8s var(--ease-out) .4s forwards; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
/* Destello decorativo tras el título */
.r-hero::after {
  content: ""; position: absolute; top: -20px; right: 10px; width: 130px; height: 130px;
  background: radial-gradient(circle, var(--marca), transparent 70%);
  opacity: .35; filter: blur(30px); z-index: -1;
  animation: heroGlow 5s ease-in-out infinite;
}
@keyframes heroGlow { 0%,100% { transform: scale(1); opacity: .3; } 50% { transform: scale(1.3); opacity: .5; } }

/* — Buscador y filtros con entrada — */
.r-buscador { transition: box-shadow .3s var(--ease-out), transform .3s var(--ease-out); }
.r-buscador:focus-within { box-shadow: 0 8px 30px rgba(197,240,72,.35); transform: translateY(-2px); }

/* — TARJETAS DE PLATO estilo revista gourmet — */
.r-plato-card {
  transition: transform .4s var(--ease-elegante), box-shadow .4s var(--ease-out), border-color .3s !important;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--panel), var(--panel)) padding-box,
    linear-gradient(135deg, rgba(197,240,72,.5), transparent 40%) border-box;
  will-change: transform;
}
.r-plato-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 24px 50px rgba(0,0,0,.13), 0 6px 16px rgba(0,0,0,.08) !important;
}
.r-plato-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120px 120px at var(--mx, 80%) var(--my, 30%), rgba(197,240,72,.12), transparent 65%);
  opacity: 0; transition: opacity .4s;
}
.r-plato-card:hover::after { opacity: 1; }
/* Foto más protagonista con anillo giratorio sutil */
.r-plato-foto-flotante { width: 128px !important; height: 128px !important; }
.r-plato-foto-flotante::after {
  content: ""; position: absolute; inset: -8px; border-radius: 50%; z-index: 0;
  background: conic-gradient(from 0deg, transparent, rgba(197,240,72,.55), transparent 40%);
  opacity: 0; transition: opacity .4s; animation: giro 4s linear infinite;
}
.r-plato-card:hover .r-plato-foto-flotante::after { opacity: 1; }
@keyframes giro { to { transform: rotate(360deg); } }
.r-plato-card:hover .r-plato-foto-flotante img { transform: scale(1.12) rotate(-3deg) !important; }
/* Precio con "salto" al hover */
.r-plato-precio { transition: transform .3s var(--ease-elegante); transform-origin: left; }
.r-plato-card:hover .r-plato-precio { transform: scale(1.08); }
/* Botón pedir con brillo deslizante */
.r-plato-pedir { position: relative; overflow: hidden; }
.r-plato-pedir::before {
  content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  transition: left .5s;
}
.r-plato-card:hover .r-plato-pedir::before { left: 100%; }

/* — Reveal al hacer scroll — */
.reveal { opacity: 0; transform: translateY(36px) scale(.97); transition: opacity .7s var(--ease-out), transform .7s var(--ease-elegante); }
.reveal.visto { opacity: 1; transform: translateY(0) scale(1); }

/* — Carrusel: arrastrable, con zoom Ken Burns — */
.r-carrusel-track { cursor: grab; touch-action: pan-y; }
.r-carrusel-track.arrastrando { cursor: grabbing; transition: none !important; }
.r-carrusel-slide img { transition: transform 6s ease-out; }
.r-carrusel-slide.activo img { transform: scale(1.08); }
.r-carrusel-overlay span {
  animation: fadeUp .8s var(--ease-out) both;
}

/* — Scroll horizontal con snap y arrastre — */
.r-scroll-h { scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; cursor: grab; overscroll-behavior-x: contain; }
.r-scroll-h.arrastrando { cursor: grabbing; }
.r-scroll-h > * { scroll-snap-align: start; }

/* — Categorías chips con vida — */
.r-categoria-chip, .r-filtro-chip { transition: transform .25s var(--ease-elegante), background .3s, color .3s, box-shadow .3s; }
.r-categoria-chip:active, .r-filtro-chip:active { transform: scale(.92); }
.r-categoria-chip.activo { box-shadow: 0 6px 18px rgba(197,240,72,.45); }

/* — Sheet detalle: entrada más cinematográfica — */
.r-sheet { transition: transform .5s var(--ease-elegante), visibility .5s !important; }
.r-detalle-hero img { transition: transform .6s var(--ease-elegante); }
.r-sheet.abierto .r-detalle-hero img { animation: zoomIn 1.2s var(--ease-elegante) both; }
@keyframes zoomIn { from { transform: scale(1.25); } to { transform: scale(1); } }
.r-sheet.abierto .r-sheet-body > * { opacity: 0; animation: fadeUp .6s var(--ease-out) forwards; }
.r-sheet.abierto .r-sheet-body > *:nth-child(1) { animation-delay: .15s; }
.r-sheet.abierto .r-sheet-body > *:nth-child(2) { animation-delay: .22s; }
.r-sheet.abierto .r-sheet-body > *:nth-child(3) { animation-delay: .29s; }
.r-sheet.abierto .r-sheet-body > *:nth-child(4) { animation-delay: .36s; }
.r-sheet.abierto .r-sheet-body > *:nth-child(5) { animation-delay: .43s; }

/* — Carrito flotante con latido al agregar — */
.r-carrito-flotante.pulso { animation: latido .5s var(--ease-elegante); }
@keyframes latido { 0%,100% { transform: translateY(0) scale(1); } 40% { transform: translateY(0) scale(1.06); } }

/* — Respeta usuarios que prefieren menos movimiento — */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ═══════════════════════════════════════════════════════════
   ✦ REFINAMIENTOS ESTÉTICOS EXTRA
   ═══════════════════════════════════════════════════════════ */

/* Títulos de sección con acento decorativo */
.r-seccion-titulo { position: relative; }
.r-seccion-titulo h3 { position: relative; display: inline-block; }
.r-seccion-titulo h3::after {
  content: ""; position: absolute; left: 0; bottom: -6px; width: 38px; height: 4px;
  border-radius: 999px; background: linear-gradient(90deg, var(--acento-fuerte), var(--acento-fuerte2));
  animation: lineaCrece .8s var(--ease-elegante) both;
}
@keyframes lineaCrece { from { width: 0; opacity: 0; } to { width: 38px; opacity: 1; } }

/* Etiqueta del plato más premium con brillo */
.r-plato-etiqueta {
  background: linear-gradient(115deg, var(--acento-fuerte), var(--acento-fuerte2)) !important;
  color: #fff !important; box-shadow: 0 4px 12px color-mix(in srgb, var(--acento-fuerte) 40%, transparent);
  position: relative; overflow: hidden;
}
.r-plato-etiqueta::after {
  content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  transform: translateX(-100%); animation: etiqBrillo 3s ease-in-out infinite;
}
@keyframes etiqBrillo { 0%, 60% { transform: translateX(-100%); } 100% { transform: translateX(200%); } }

/* Rating con estrella dorada elegante */
.r-plato-rating { display: inline-flex; align-items: center; gap: 4px; background: color-mix(in srgb, #f5c542 18%, transparent); padding: 3px 10px 3px 8px; border-radius: 999px; margin-bottom: 8px; }
.r-plato-rating svg { color: #f5c542; fill: #f5c542; }
.r-plato-rating span { font-weight: 800; font-size: 13px; }
.r-plato-rating small { color: var(--texto-suave); font-size: 11px; }

/* Foto del plato con marco cálido y sombra dramática */
.r-plato-foto-flotante img {
  border-width: 5px !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.22), 0 4px 12px rgba(0,0,0,.12) !important;
}
.r-plato-foto-flotante::before {
  background: radial-gradient(circle, var(--acento-fuerte2), var(--marca)) !important;
  opacity: .28 !important; filter: blur(2px);
}

/* Header con blur al hacer scroll (glassmorphism) */
.r-header { backdrop-filter: blur(10px); background: color-mix(in srgb, var(--fondo) 78%, transparent); position: sticky; top: 0; z-index: 40; transition: box-shadow .3s, background .3s; }
.r-header.scrolled { box-shadow: 0 6px 24px rgba(0,0,0,.08); background: color-mix(in srgb, var(--fondo) 92%, transparent); }

/* Buscador más refinado */
.r-buscador { border: 1.5px solid var(--linea); transition: border-color .3s, box-shadow .3s, transform .3s; }
.r-buscador:focus-within { border-color: var(--acento-fuerte); }

/* Chips de categoría con profundidad */
.r-cat-chip, .r-categoria-chip { transition: all .28s var(--ease-elegante); border: 1.5px solid var(--linea); }
.r-cat-chip.activa, .r-categoria-chip.activo {
  background: linear-gradient(120deg, var(--marca), var(--marca-2)) !important;
  border-color: transparent;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--marca) 40%, transparent);
  transform: translateY(-2px);
}

/* Precio con símbolo más pequeño y elegante */
.r-plato-precio { display: inline-flex; align-items: baseline; gap: 1px; }

/* Botón "Ver todo el menú" premium */
.r-ver-todo { transition: transform .3s var(--ease-elegante), box-shadow .3s, gap .3s; }
.r-ver-todo:hover { transform: translateY(-2px); }
.r-ver-todo:hover .r-vt-flecha { transform: translateX(4px); }
.r-vt-flecha { transition: transform .3s; display: inline-flex; }

/* Carrito flotante con degradado sutil */
.r-carrito-flotante { background: linear-gradient(120deg, var(--negro), color-mix(in srgb, var(--negro) 80%, var(--acento-fuerte))) !important; }

/* ═══════════════════════════════════════════════════════════
   ✦ MEJORAS ATREVIDAS — Bienvenida, vista, detalle, confeti
   ═══════════════════════════════════════════════════════════ */

/* — BIENVENIDA CINEMATOGRÁFICA — */
.bienvenida-fondo {
  transform: scale(1.15); animation: bienvZoom 8s ease-out forwards;
}
@keyframes bienvZoom { to { transform: scale(1); } }
.bienvenida-overlay {
  background: linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,.15) 55%, rgba(0,0,0,.5)) !important;
}
/* Vapor/luz que sube */
.bienvenida-overlay::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 40% at 50% 100%, color-mix(in srgb, var(--marca) 30%, transparent), transparent 70%);
  animation: vaporSube 4s ease-in-out infinite alternate;
}
@keyframes vaporSube { from { opacity: .4; transform: translateY(10px); } to { opacity: .8; transform: translateY(-10px); } }
.bienvenida-logo {
  opacity: 0; transform: translateY(30px) scale(.8) rotate(-8deg);
  animation: bienvLogo 1s var(--ease-elegante) .2s forwards;
}
@keyframes bienvLogo { to { opacity: 1; transform: translateY(0) scale(1) rotate(0); } }
.bienvenida-logo::after {
  content: ""; position: absolute; inset: -6px; border-radius: 30px; z-index: -1;
  background: conic-gradient(from 0deg, transparent, var(--marca), transparent 45%);
  animation: giro 3.5s linear infinite;
}
.bienvenida-texto h1 {
  opacity: 0; animation: bienvTexto 1s var(--ease-elegante) .5s forwards;
}
.bienvenida-texto p {
  opacity: 0; animation: bienvTexto 1s var(--ease-elegante) .7s forwards;
}
@keyframes bienvTexto { from { opacity: 0; transform: translateY(24px); filter: blur(6px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
.btn-continuar {
  opacity: 0; animation: bienvTexto .9s var(--ease-elegante) .95s forwards;
}
/* Partículas decorativas flotando en bienvenida */
.bienv-particula {
  position: absolute; border-radius: 50%; background: var(--marca);
  pointer-events: none; opacity: .5; z-index: 1;
  animation: particulaFlota linear infinite;
}
@keyframes particulaFlota {
  from { transform: translateY(0) translateX(0); opacity: 0; }
  10% { opacity: .6; }
  90% { opacity: .3; }
  to { transform: translateY(-120vh) translateX(30px); opacity: 0; }
}

/* — TOGGLE DE VISTA (tarjetas / lista) — */
.r-vista-toggle {
  display: inline-flex; gap: 2px; background: var(--panel-2); border: 1.5px solid var(--linea);
  border-radius: 999px; padding: 3px; margin-left: auto;
}
.r-vista-btn {
  width: 36px; height: 32px; border: 0; border-radius: 999px; background: transparent;
  display: grid; place-items: center; cursor: pointer; color: var(--texto-suave);
  transition: background .25s, color .25s;
}
.r-vista-btn.activo { background: var(--marca); color: var(--marca-tinta); }
.r-vista-btn svg { width: 17px; height: 17px; }
.r-seccion-titulo { display: flex; align-items: center; gap: 12px; }

/* — VISTA LISTA COMPACTA — */
.r-platos.vista-lista { display: flex; flex-direction: column; gap: 10px; }
.r-platos.vista-lista .r-plato-card {
  flex-direction: row; align-items: center; min-height: 96px !important; padding: 12px 14px;
}
.r-platos.vista-lista .r-plato-contenido { max-width: calc(100% - 100px); order: 2; padding-left: 14px; }
.r-platos.vista-lista .r-plato-foto-flotante {
  position: relative !important; right: auto !important; top: auto !important; transform: none !important;
  width: 78px !important; height: 78px !important; order: 1; flex-shrink: 0;
}
.r-platos.vista-lista .r-plato-card h4 { font-size: 18px; }
.r-platos.vista-lista .r-plato-desc { display: none; }
.r-platos.vista-lista .r-plato-precio { font-size: 22px; margin-bottom: 6px; }
.r-platos.vista-lista .r-plato-pedir { padding: 8px 16px; font-size: 13px; }
.r-platos.vista-lista .r-plato-fav { top: 10px; right: 10px; width: 30px; height: 30px; }

/* — CONFETI — */
.confeti-pieza {
  position: fixed; width: 10px; height: 10px; z-index: 9998; pointer-events: none;
  will-change: transform, opacity;
}

/* — CATEGORÍAS con ícono — */
.r-cat-emoji { font-size: 16px; margin-right: 5px; }

/* — SKELETONS con shimmer elegante — */
.r-plato-skeleton, .sk-chip {
  position: relative; overflow: hidden;
  background: var(--panel);
}
.sk-linea, .sk-foto {
  position: relative; overflow: hidden;
  background: color-mix(in srgb, var(--texto) 6%, transparent); border-radius: 8px;
}
.sk-linea::after, .sk-foto::after, .r-plato-skeleton::after, .sk-chip::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--marca) 18%, transparent), transparent);
  transform: translateX(-100%); animation: shimmer 1.4s ease-in-out infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }

/* — Detalle: contenedor para animación de vuelo — */
.r-vuelo-clone {
  position: fixed; z-index: 200; border-radius: 50%; object-fit: cover; pointer-events: none;
  box-shadow: 0 20px 50px rgba(0,0,0,.3); will-change: transform, border-radius;
}

/* Íconos SVG profesionales en categorías */
.r-cat-ico { width: 17px; height: 17px; margin-right: 6px; vertical-align: -3px; flex-shrink: 0; }
.r-cat-chip { display: inline-flex; align-items: center; }

/* ═══════ Modal profesional de NOVEDADES ═══════ */
.r-noticia-card { cursor: pointer; transition: transform .3s var(--ease-elegante), box-shadow .3s; }
.r-noticia-card:active { transform: scale(.97); }
.r-noticia-leer { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--acento-fuerte); }
.r-noti-modal-ov {
  position: fixed; inset: 0; z-index: 300; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0,0,0,.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .3s; padding: 0;
}
.r-noti-modal-ov.abierto { opacity: 1; }
.r-noti-modal {
  background: var(--fondo); width: 100%; max-width: 460px; max-height: 90vh; overflow-y: auto;
  border-radius: 28px 28px 0 0; position: relative;
  transform: translateY(40px); transition: transform .4s var(--ease-elegante);
  -webkit-overflow-scrolling: touch;
}
.r-noti-modal-ov.abierto .r-noti-modal { transform: translateY(0); }
@media (min-width: 600px) { .r-noti-modal-ov { align-items: center; } .r-noti-modal { border-radius: 28px; } }
.r-noti-modal-x {
  position: absolute; top: 16px; right: 16px; z-index: 3; width: 38px; height: 38px; border-radius: 50%;
  border: 0; background: rgba(0,0,0,.35); color: #fff; display: grid; place-items: center; cursor: pointer;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.r-noti-modal-foto { width: 100%; height: 240px; overflow: hidden; }
.r-noti-modal-foto img { width: 100%; height: 100%; object-fit: cover; }
.r-noti-modal-foto.sin-foto { display: grid; place-items: center; background: linear-gradient(135deg, var(--marca), var(--marca-2)); color: var(--marca-tinta); height: 160px; }
.r-noti-modal-cuerpo { padding: 22px 24px calc(env(safe-area-inset-bottom) + 28px); }
.r-noti-modal-badge {
  display: inline-block; background: linear-gradient(115deg, var(--acento-fuerte), var(--acento-fuerte2));
  color: #fff; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  padding: 5px 13px; border-radius: 999px; margin-bottom: 12px;
}
.r-noti-modal-cuerpo h2 { font-family: var(--font-display); font-size: 27px; font-weight: 800; line-height: 1.1; letter-spacing: -.5px; margin-bottom: 12px; }
.r-noti-modal-cuerpo p { font-size: 15.5px; line-height: 1.65; color: var(--texto-suave); }
.r-noti-modal-handle { width: 42px; height: 4px; border-radius: 999px; background: rgba(255,255,255,.6); position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 4; }

/* ═══════ "Los más pedidos" premium con ranking ═══════ */
.r-top-card {
  flex: 0 0 190px; scroll-snap-align: start; cursor: pointer; border-radius: 22px;
  overflow: hidden; background: var(--panel); box-shadow: var(--sombra-card);
  transition: transform .35s var(--ease-elegante), box-shadow .35s;
}
.r-top-card:active { transform: scale(.97); }
.r-top-card:hover { transform: translateY(-5px); box-shadow: 0 20px 44px rgba(0,0,0,.15); }
.r-top-foto { position: relative; width: 100%; height: 150px; overflow: hidden; }
.r-top-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-elegante); }
.r-top-card:hover .r-top-foto img { transform: scale(1.08); }
.r-top-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.35), transparent 45%); }
.r-top-rank {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.92); color: var(--negro); font-family: var(--font-display);
  font-weight: 800; font-size: 15px; box-shadow: 0 4px 12px rgba(0,0,0,.2);
  backdrop-filter: blur(4px);
}
.r-top-fuego {
  position: absolute; bottom: 10px; left: 10px; z-index: 2;
  background: linear-gradient(115deg, var(--acento-fuerte), var(--acento-fuerte2));
  color: #fff; font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 999px;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--acento-fuerte) 45%, transparent);
}
.r-top-info { padding: 12px 14px 14px; }
.r-top-info strong { font-family: var(--font-display); font-size: 16px; font-weight: 700; line-height: 1.15; display: block; margin-bottom: 8px; letter-spacing: -.3px; }
.r-top-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.r-top-rating { font-size: 12px; font-weight: 700; color: #d99400; background: color-mix(in srgb, #f5c542 20%, transparent); padding: 3px 9px; border-radius: 999px; }
.r-top-precio { font-family: var(--font-display); font-size: 18px; font-weight: 800; color: var(--texto); margin-left: auto; }

/* Badges inteligentes automáticos (toque único) */
.r-badge-inteligente {
  display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 800;
  padding: 3px 9px; border-radius: 999px; margin-bottom: 8px; letter-spacing: .02em;
  animation: badgePop .5s var(--ease-elegante) both;
}
@keyframes badgePop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
.r-badge-inteligente.oro { background: linear-gradient(115deg, #f5c542, #e0a020); color: #4a3200; }
.r-badge-inteligente.oro { background: linear-gradient(115deg, #ffd75e, #e0a020); color: #4a3200; }
.r-badge-inteligente.oro svg { color: #7a5600; }
.r-badge-inteligente.picante { background: color-mix(in srgb, #e8532b 16%, transparent); color: #c73e1d; }
.r-badge-inteligente.verde { background: color-mix(in srgb, #4ad97f 18%, transparent); color: #1f8f4d; }

/* Efecto al cambiar el precio en el detalle */
.precio-cambio { animation: precioPop .35s var(--ease-elegante); }
@keyframes precioPop { 0% { transform: scale(1); } 45% { transform: scale(1.14); color: var(--acento-fuerte); } 100% { transform: scale(1); } }
.r-detalle-precio { display: inline-block; transition: color .2s; }

/* ═══════════════════════════════════════════════════════════
   ✦ TARJETA DE PLATO ESTILO VITRINA (curva + botón Agregar)
   ═══════════════════════════════════════════════════════════ */
.r-platos:not(.vista-lista) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 4px 16px 24px; }

.r-platos:not(.vista-lista) .r-plato-card {
  display: flex !important; flex-direction: column; justify-content: flex-start;
  padding: 0 !important; min-height: 0 !important; overflow: visible;
  background: var(--panel); border-radius: 24px;
  box-shadow: 0 10px 30px rgba(0,0,0,.09), 0 2px 8px rgba(0,0,0,.05);
}
/* Foto arriba, grande, con fondo curvo */
.r-platos:not(.vista-lista) .r-plato-foto-flotante {
  position: relative !important; right: auto !important; top: auto !important; left: auto !important;
  transform: none !important; width: 100% !important; height: 132px !important;
  margin: 0 !important; display: flex; align-items: center; justify-content: center;
  border-radius: 24px 24px 0 0; overflow: hidden;
  background: linear-gradient(165deg, color-mix(in srgb, var(--marca) 18%, var(--panel)), var(--panel));
}
.r-platos:not(.vista-lista) .r-plato-foto-flotante::before { display: none !important; }
.r-platos:not(.vista-lista) .r-plato-foto-flotante img {
  position: relative; z-index: 2; width: 108px !important; height: 108px !important;
  border-radius: 50%; border: 4px solid #fff !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.20) !important; margin: 0 !important;
  transform: none !important; object-fit: cover;
}
.r-platos:not(.vista-lista) .r-plato-card:active .r-plato-foto-flotante img { transform: scale(1.05) !important; }
.r-platos:not(.vista-lista) .r-plato-foto-flotante::after { display: none !important; }
.r-platos:not(.vista-lista) .r-plato-foto-flotante { width: 100% !important; }
/* Contenido debajo */
.r-platos:not(.vista-lista) .r-plato-contenido {
  max-width: 100% !important; width: 100%; padding: 16px 12px 14px; text-align: center;
  display: flex; flex-direction: column; align-items: center; z-index: 2; position: relative;
}
.r-platos:not(.vista-lista) .r-plato-badges { min-height: 0; margin-bottom: 4px; }
.r-platos:not(.vista-lista) .r-plato-card h4 { font-size: 16px; margin-bottom: 4px; text-align: center; }
.r-platos:not(.vista-lista) .r-plato-rating { margin: 0 auto 6px; }
.r-platos:not(.vista-lista) .r-plato-desc { font-size: 11.5px; text-align: center; margin-bottom: 12px; min-height: 15px; }
/* Pie: precio + botón agregar */
.r-platos:not(.vista-lista) .r-plato-pie {
  display: flex; flex-direction: column; align-items: stretch; width: 100%;
  gap: 8px; margin-top: auto;
}
.r-platos:not(.vista-lista) .r-plato-precio {
  font-family: var(--font-display); font-size: 21px !important; font-weight: 800; margin: 0 !important;
}
.r-platos:not(.vista-lista) .r-plato-pedir {
  width: 100%; justify-content: center; padding: 10px 14px !important; font-size: 13px; gap: 5px;
}
.r-platos:not(.vista-lista) .r-plato-pedir svg { width: 15px; height: 15px; }
.r-platos:not(.vista-lista) .r-plato-fav { top: 10px; right: 10px; width: 32px; height: 32px; }
.r-platos:not(.vista-lista) .r-plato-etiqueta { margin-bottom: 0; }

/* En pantallas estrechas mantener 2 columnas cómodas */
@media (max-width: 360px) {
  .r-platos:not(.vista-lista) { gap: 10px; padding: 4px 12px 24px; }
  .r-platos:not(.vista-lista) .r-plato-card h4 { font-size: 15px; }
  .r-platos:not(.vista-lista) .r-plato-precio { font-size: 19px !important; }
}

/* ═══════ CATEGORÍAS TIPO DROPDOWN ═══════ */
.r-cat-dropdown { position: relative; padding: 0 22px; margin-bottom: 16px; z-index: 30; }
.r-cat-dd-boton {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: var(--panel); border: 1.5px solid var(--linea); border-radius: 16px;
  padding: 14px 18px; cursor: pointer; font-family: var(--font-body); color: var(--texto);
  font-size: 15px; font-weight: 700; transition: border-color .25s, box-shadow .25s;
  box-shadow: 0 4px 16px rgba(0,0,0,.05);
}
.r-cat-dd-boton:active { transform: scale(.99); }
.r-cat-dropdown.abierto .r-cat-dd-boton { border-color: var(--marca); box-shadow: 0 6px 22px color-mix(in srgb, var(--marca) 30%, transparent); }
.r-cat-dd-sel { display: inline-flex; align-items: center; gap: 9px; }
.r-cat-dd-flecha { transition: transform .3s var(--ease-elegante); flex-shrink: 0; color: var(--texto-suave); }
.r-cat-dropdown.abierto .r-cat-dd-flecha { transform: rotate(180deg); }
.r-cat-dd-menu {
  position: absolute; left: 22px; right: 22px; top: calc(100% + 6px);
  background: var(--panel); border: 1.5px solid var(--linea); border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0,0,0,.18); overflow: hidden auto; max-height: 0;
  opacity: 0; pointer-events: none; transform: translateY(-8px);
  transition: max-height .3s var(--ease-elegante), opacity .25s, transform .3s var(--ease-elegante);
  z-index: 40;
}
.r-cat-dropdown.abierto .r-cat-dd-menu { max-height: 320px; opacity: 1; pointer-events: auto; transform: translateY(0); }
.r-cat-dd-item {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 13px 18px;
  background: transparent; border: 0; border-bottom: 1px solid var(--linea);
  cursor: pointer; font-family: var(--font-body); font-size: 14.5px; font-weight: 600;
  color: var(--texto); text-align: left; transition: background .2s;
}
.r-cat-dd-item:last-child { border-bottom: 0; }
.r-cat-dd-item:hover { background: color-mix(in srgb, var(--marca) 10%, transparent); }
.r-cat-dd-item.activo { background: color-mix(in srgb, var(--marca) 18%, transparent); color: var(--texto); font-weight: 800; }
.r-cat-dd-item.activo .r-cat-ico { color: var(--marca); }
.r-cat-dd-item .r-cat-ico { width: 18px; height: 18px; flex-shrink: 0; }

/* ═══════ BANNER PROMOCIONAL DESLIZABLE (estilo Rappi) ═══════ */
.r-promo-banner { margin: 4px 22px 16px; position: relative; }
.r-promo-track { display: flex; overflow: hidden; border-radius: 20px; transition: transform .4s var(--ease-elegante); touch-action: pan-y; cursor: grab; }
.r-promo-slide {
  flex: 0 0 100%; height: 120px; border-radius: 20px; overflow: hidden;
  background-size: cover; background-position: center;
  background-color: var(--acento-fuerte);
  display: flex; align-items: center; padding: 20px 22px; position: relative;
}
.r-promo-txt { color: #fff; z-index: 2; max-width: 80%; }
.r-promo-badge {
  display: inline-block; background: #fff; color: var(--acento-fuerte);
  font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 999px;
  margin-bottom: 8px; letter-spacing: .02em;
}
.r-promo-txt strong { display: block; font-family: var(--font-display); font-size: 20px; font-weight: 800; line-height: 1.1; letter-spacing: -.4px; }
.r-promo-txt p { font-size: 12.5px; margin-top: 4px; opacity: .92; }
.r-promo-dots { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
.r-promo-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--linea); transition: width .3s, background .3s; }
.r-promo-dot.activo { width: 20px; background: var(--acento-fuerte); }

/* ═══════ TOQUE NEUMÓRFICO SUAVE (estilo Apple) ═══════ */
/* Botones de ícono con relieve suave */
.btn-icono, .r-plato-fav, .r-noti-modal-x {
  box-shadow:
    0 4px 10px rgba(0,0,0,.08),
    0 -1px 2px rgba(255,255,255,.7) inset,
    0 1px 2px rgba(0,0,0,.05) inset !important;
  transition: box-shadow .25s var(--ease-out), transform .15s !important;
}
.btn-icono:active, .r-plato-fav:active {
  box-shadow:
    0 1px 3px rgba(0,0,0,.12) inset,
    0 -1px 2px rgba(255,255,255,.4) inset !important;
  transform: scale(.94);
}
/* Navbar inferior con toque neumórfico */
.r-navbar .r-nav-btn.activo {
  position: relative;
}
.r-navbar .r-nav-btn.activo::before {
  content: ""; position: absolute; inset: 8px 14px; border-radius: 16px;
  background: color-mix(in srgb, var(--marca) 14%, transparent);
  box-shadow: 0 2px 6px rgba(0,0,0,.06) inset;
  z-index: -1;
}
/* Tema oscuro: relieve adaptado */
.tema-oscuro .btn-icono, .tema-oscuro .r-plato-fav {
  box-shadow:
    0 4px 12px rgba(0,0,0,.4),
    0 -1px 2px rgba(255,255,255,.06) inset,
    0 1px 2px rgba(0,0,0,.3) inset !important;
}

/* Botón cerrar en el sheet de detalle */
.r-sheet-cerrar {
  position: absolute; top: 16px; right: 16px; z-index: 100;
  width: 42px; height: 42px; border-radius: 50%; border: 0;
  background: #fff; color: #1a1a1a; cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
  transition: transform .15s, background .2s;
}
.r-sheet-cerrar:active { transform: scale(.88); }
.r-sheet-cerrar:hover { background: #f0f0f0; }
.tema-oscuro .r-sheet-cerrar { background: #2a2a2a; color: #fff; }

/* ═══════════════════════════════════════════════════════════
   ✦✦ TARJETA DE PLATO — DEFINITIVA (sobrescribe todo lo anterior)
   Limpia franjas y artefactos de rediseños previos.
   ═══════════════════════════════════════════════════════════ */
.r-platos:not(.vista-lista) {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important; padding: 6px 16px 24px !important;
}
.r-platos:not(.vista-lista) .r-plato-card {
  display: flex !important; flex-direction: column !important; justify-content: flex-start !important;
  align-items: stretch !important; padding: 0 !important; min-height: 0 !important;
  overflow: hidden !important; border-radius: 22px !important;
  background: var(--panel) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04) !important;
  animation: none !important; will-change: auto !important;
  transition: transform .18s var(--ease-out), box-shadow .25s var(--ease-out) !important;
}
.r-platos:not(.vista-lista) .r-plato-card:active {
  transform: scale(.97) !important; box-shadow: 0 4px 14px rgba(0,0,0,.1) !important;
}
.r-platos:not(.vista-lista) .r-plato-card:hover .r-plato-foto-flotante img { transform: none !important; }
/* FOTO: bloque superior limpio, sin franjas */
.r-platos:not(.vista-lista) .r-plato-foto-flotante {
  position: relative !important; inset: auto !important; right: auto !important;
  top: auto !important; left: auto !important; bottom: auto !important;
  transform: none !important; margin: 0 !important;
  width: 100% !important; height: 130px !important; aspect-ratio: auto !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  border-radius: 0 !important; overflow: hidden !important;
  background: linear-gradient(165deg, color-mix(in srgb, var(--marca) 16%, var(--panel)), var(--panel)) !important;
}
/* Matar TODOS los pseudo-elementos viejos (franjas, anillos, curvas) */
.r-platos:not(.vista-lista) .r-plato-foto-flotante::before,
.r-platos:not(.vista-lista) .r-plato-foto-flotante::after {
  content: none !important; display: none !important; background: none !important;
}
.r-platos:not(.vista-lista) .r-plato-foto-flotante img {
  position: relative !important; z-index: 1 !important;
  width: 104px !important; height: 104px !important; aspect-ratio: 1 !important;
  border-radius: 50% !important; object-fit: cover !important;
  border: 4px solid #fff !important; margin: 0 !important;
  transform: none !important; filter: none !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.18) !important;
  transition: transform .35s var(--ease-elegante) !important;
}
.r-platos:not(.vista-lista) .r-plato-card:active .r-plato-foto-flotante img { transform: scale(1.04) !important; }
/* CONTENIDO */
.r-platos:not(.vista-lista) .r-plato-contenido {
  max-width: 100% !important; width: 100% !important;
  padding: 14px 12px 14px !important; text-align: center !important;
  display: flex !important; flex-direction: column !important; align-items: center !important;
  position: relative !important; z-index: 1 !important;
}
.r-platos:not(.vista-lista) .r-plato-badges { margin-bottom: 6px; min-height: 0; }
.r-platos:not(.vista-lista) .r-plato-card h4 {
  font-size: 15.5px !important; line-height: 1.15 !important; margin-bottom: 4px !important; text-align: center !important;
}
.r-platos:not(.vista-lista) .r-plato-rating { margin: 0 auto 6px !important; }
.r-platos:not(.vista-lista) .r-plato-desc {
  font-size: 11.5px !important; text-align: center !important; margin-bottom: 12px !important;
  min-height: 15px !important; max-width: 100% !important;
}
.r-platos:not(.vista-lista) .r-plato-pie {
  display: flex !important; flex-direction: column !important; align-items: stretch !important;
  width: 100% !important; gap: 8px !important; margin-top: auto !important;
}
.r-platos:not(.vista-lista) .r-plato-precio {
  font-family: var(--font-display) !important; font-size: 21px !important; font-weight: 800 !important; margin: 0 !important;
}
.r-platos:not(.vista-lista) .r-plato-pedir {
  width: 100% !important; justify-content: center !important;
  padding: 11px 12px !important; font-size: 13px !important; gap: 5px !important;
}
.r-platos:not(.vista-lista) .r-plato-pedir svg { width: 15px; height: 15px; }
.r-platos:not(.vista-lista) .r-plato-fav {
  top: 10px !important; right: 10px !important; width: 32px !important; height: 32px !important; z-index: 3 !important;
}
.r-platos:not(.vista-lista) .r-plato-etiqueta { margin-bottom: 0 !important; }

/* Pantallas muy estrechas: una columna cómoda */
@media (max-width: 340px) {
  .r-platos:not(.vista-lista) { grid-template-columns: 1fr !important; }
}