/* Carta interactiva Premium · Rosero & Co.
   Cada local define sus colores y letras en :root (ver la página de cada carta). */
:root{
  --fondo:#141210;--superficie:#1E1B18;--superficie2:#272320;--texto:#F3ECE2;--suave:#A79C8F;--acento:#C9895A;--linea:rgba(255,255,255,.09);
  --serif:Georgia,serif;--sans:system-ui,sans-serif;--radio:18px;
}
*{box-sizing:border-box;margin:0;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{background:var(--fondo);color:var(--texto);font:400 1rem/1.55 var(--sans);-webkit-font-smoothing:antialiased;overscroll-behavior-y:none}
body.bloqueado{overflow:hidden}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.app{max-width:34rem;margin:0 auto;min-height:100svh;background:var(--fondo);position:relative;padding-bottom:6rem}
@media (min-width:700px){body{background:#0a0908}.app{box-shadow:0 0 80px rgba(0,0,0,.5)}}

/* Portada */
.portada{position:relative;height:15rem;overflow:hidden}
.portada img{width:100%;height:100%;object-fit:cover;transform:scale(1.05);animation:c-acercar 12s ease-out forwards}
@keyframes c-acercar{to{transform:scale(1)}}
.portada::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),transparent 40%,var(--fondo) 100%)}
.idioma{position:absolute;top:.9rem;right:.9rem;z-index:2;display:flex;background:rgba(0,0,0,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:999px;padding:3px;border:1px solid rgba(255,255,255,.15)}
.idioma button{font-size:.72rem;font-weight:700;letter-spacing:.08em;padding:.35rem .7rem;border-radius:999px;color:rgba(255,255,255,.75)}
.idioma button[aria-pressed=true]{background:#fff;color:#111}
.cabeza{position:relative;margin-top:-3.6rem;padding:0 1.25rem;z-index:1}
.logo{width:4.6rem;height:4.6rem;border-radius:50%;background:var(--superficie);border:3px solid var(--fondo);display:grid;place-items:center;font:600 1.5rem var(--serif);color:var(--acento);overflow:hidden;box-shadow:0 10px 30px -10px rgba(0,0,0,.6)}
.cabeza h1{font:600 1.9rem/1.1 var(--serif);margin:.7rem 0 .3rem}
.cabeza .datos{font-size:.82rem;color:var(--suave);display:flex;flex-wrap:wrap;gap:.2rem 1rem}
.cabeza .datos a{text-decoration:none}

/* Barra fija: cartas + buscador */
.barra{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--fondo) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:.9rem 1.25rem .8rem;margin-top:.9rem;border-bottom:1px solid transparent;transition:border-color .3s}
.barra.sombra{border-bottom-color:var(--linea)}
.cartas{display:flex;gap:.5rem;overflow-x:auto;scrollbar-width:none;margin-bottom:.7rem}
.cartas::-webkit-scrollbar{display:none}
.cartas button{flex:none;padding:.42rem 1rem;border-radius:999px;border:1.5px solid color-mix(in srgb,var(--acento) 55%,transparent);color:var(--acento);font-size:.85rem;font-weight:600;transition:background .25s,color .25s}
.cartas button[aria-pressed=true]{background:var(--acento);color:var(--fondo);border-color:var(--acento)}
.buscar{position:relative}
.buscar input{width:100%;font:inherit;font-size:.95rem;color:var(--texto);background:var(--superficie);border:1px solid var(--linea);border-radius:999px;padding:.75rem 2.8rem .75rem 1.1rem;outline:none;transition:border-color .2s}
.buscar input:focus{border-color:var(--acento)}
.buscar input::placeholder{color:var(--suave)}
.buscar button{position:absolute;right:.35rem;top:50%;translate:0 -50%;width:2.3rem;height:2.3rem;border-radius:50%;display:grid;place-items:center;color:var(--suave)}
.buscar svg{width:18px;height:18px}

/* Vistas */
.vista{padding:0 1.25rem;animation:c-entra .45s cubic-bezier(.2,.7,.2,1)}
@keyframes c-entra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.titulo{font:600 1.35rem var(--serif);margin:1.6rem 0 .9rem;display:flex;align-items:center;gap:.6rem}
.titulo small{font:500 .78rem var(--sans);color:var(--suave)}

/* Sugerencias (carrusel) */
.carrusel{display:flex;gap:.8rem;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -1.25rem;padding:0 1.25rem .4rem;scrollbar-width:none}
.carrusel::-webkit-scrollbar{display:none}
.sug{flex:none;width:72%;scroll-snap-align:start;text-align:left;border-radius:var(--radio);overflow:hidden;background:var(--superficie);position:relative}
.sug img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .6s}
.sug:active img{transform:scale(1.04)}
.sug .tx{padding:.8rem .95rem .95rem}
.sug b{display:block;font:600 1.05rem var(--serif)}
.sug .px{color:var(--acento);font-weight:700;font-size:.95rem}
.sello-chef{position:absolute;top:.7rem;left:.7rem;background:var(--acento);color:var(--fondo);font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:.3rem .6rem;border-radius:999px}

/* Categorías */
.cats{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.cat{position:relative;aspect-ratio:1/1.05;border-radius:var(--radio);overflow:hidden;text-align:left;background:var(--superficie2);isolation:isolate}
.cat.ancha{grid-column:1/-1;aspect-ratio:2.3/1}
.cat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.cat:hover img,.cat:active img{transform:scale(1.06)}
.cat::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.82))}
.cat .tx{position:absolute;left:.95rem;right:.95rem;bottom:.85rem;color:#fff}
.cat b{display:block;font:600 1.15rem/1.15 var(--serif)}
.cat small{font-size:.75rem;opacity:.8}
.cat.sin-foto{background:linear-gradient(135deg,var(--superficie2),var(--superficie))}
.cat.sin-foto::after{display:none}
.cat.sin-foto .tx{color:var(--texto)}

/* Vista de categoría */
.volver{display:inline-flex;align-items:center;gap:.4rem;margin-top:1.2rem;font-size:.85rem;font-weight:600;color:var(--suave)}
.volver svg{width:18px;height:18px}
.chips-cat{position:sticky;top:var(--alto-barra,7.6rem);z-index:10;display:flex;gap:.45rem;overflow-x:auto;scrollbar-width:none;margin:0 -1.25rem;padding:.6rem 1.25rem;background:color-mix(in srgb,var(--fondo) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.chips-cat::-webkit-scrollbar{display:none}
.chips-cat button{flex:none;font-size:.8rem;font-weight:600;padding:.35rem .8rem;border-radius:999px;background:var(--superficie);color:var(--suave);transition:all .2s}
.chips-cat button[aria-current=true]{background:var(--texto);color:var(--fondo)}
.filtros{display:flex;gap:.45rem;flex-wrap:wrap;margin:.4rem 0 .2rem}
.filtros button{font-size:.76rem;font-weight:600;padding:.32rem .7rem;border-radius:999px;border:1px solid var(--linea);color:var(--suave);display:inline-flex;gap:.3rem;align-items:center}
.filtros button[aria-pressed=true]{border-color:var(--acento);color:var(--acento);background:color-mix(in srgb,var(--acento) 12%,transparent)}
.grupo{scroll-margin-top:11rem}
.grupo h2{font:600 1.5rem var(--serif);margin:1.8rem 0 .8rem}

/* Plato */
.plato{display:block;width:100%;text-align:left;margin-bottom:1.1rem;border-radius:var(--radio);overflow:hidden;background:var(--superficie);transition:transform .2s}
.plato:active{transform:scale(.985)}
.plato .foto{position:relative;overflow:hidden}
.plato .foto img{width:100%;aspect-ratio:16/11;object-fit:cover}
.plato .tx{padding:.9rem 1rem 1rem}
.plato b{display:block;font:600 1.12rem/1.25 var(--serif)}
.plato p{font-size:.86rem;color:var(--suave);margin-top:.25rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.plato .pie{display:flex;justify-content:space-between;align-items:center;margin-top:.55rem;gap:.5rem}
.px{font-weight:700;color:var(--acento);font-variant-numeric:tabular-nums}
.etqs{display:flex;gap:.3rem;flex-wrap:wrap}
.etq{font-size:.68rem;font-weight:700;padding:.18rem .5rem;border-radius:999px;background:var(--superficie2);color:var(--suave)}
.plato.compacto{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.8rem;padding:.95rem 1rem}
.plato.compacto .tx{padding:0}
.plato.compacto .mini{width:4.6rem;height:4.6rem;border-radius:12px;object-fit:cover}
.agotado{opacity:.5}
.agotado .px::after{content:" · " attr(data-agotado)}
.en-sel{position:absolute;top:.7rem;right:.7rem;background:var(--acento);color:var(--fondo);font-size:.72rem;font-weight:800;min-width:1.6rem;height:1.6rem;border-radius:999px;display:grid;place-items:center;padding:0 .45rem}
.vacio{text-align:center;color:var(--suave);padding:3rem 1rem}

/* Ficha del plato (hoja que sube) */
.fondo-hoja{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.55);opacity:0;transition:opacity .3s}
.fondo-hoja.abierta{opacity:1}
.hoja{position:fixed;left:50%;bottom:0;z-index:41;width:min(100%,34rem);max-height:92svh;overflow:auto;translate:-50% 100%;background:var(--superficie);border-radius:24px 24px 0 0;transition:translate .42s cubic-bezier(.2,.8,.2,1);overscroll-behavior:contain}
.hoja.abierta{translate:-50% 0}
.hoja .asa{position:sticky;top:0;z-index:2;display:flex;justify-content:center;padding:.6rem;margin-bottom:-2.2rem}
.hoja .asa span{width:2.6rem;height:5px;border-radius:9px;background:rgba(255,255,255,.55)}
.hoja .foto-g{width:100%;aspect-ratio:4/3;object-fit:cover;cursor:zoom-in}
.hoja .cuerpo{padding:1.2rem 1.3rem 1.4rem}
.hoja h3{font:600 1.6rem/1.15 var(--serif)}
.hoja .desc{color:var(--suave);margin-top:.5rem}
.hoja .px{font-size:1.35rem;margin-top:.8rem;display:block}
.hoja .etqs{margin-top:.8rem}
.cerrar{position:absolute;top:.8rem;right:.8rem;z-index:3;width:2.4rem;height:2.4rem;border-radius:50%;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);display:grid;place-items:center;color:#fff}
.cerrar svg{width:18px;height:18px}
.cantidad{display:flex;align-items:center;gap:.8rem;margin-top:1.3rem}
.cantidad .mm{width:2.6rem;height:2.6rem;border-radius:50%;border:1.5px solid var(--linea);font-size:1.2rem;font-weight:700;display:grid;place-items:center}
.cantidad output{min-width:1.5rem;text-align:center;font-weight:700;font-size:1.1rem}
.boton{display:flex;justify-content:center;align-items:center;gap:.5rem;width:100%;padding:1rem 1.2rem;border-radius:999px;background:var(--acento);color:var(--fondo);font-weight:700;font-size:.98rem;margin-top:1rem;text-decoration:none;transition:filter .2s,transform .15s}
.boton:active{transform:scale(.98)}
.boton.claro{background:transparent;color:var(--texto);border:1.5px solid var(--linea)}
.nota{font-size:.78rem;color:var(--suave);text-align:center;margin-top:.8rem}

/* Foto a pantalla completa con zoom */
.visor{position:fixed;inset:0;z-index:60;background:#000;display:grid;place-items:center;overflow:auto;opacity:0;transition:opacity .25s;touch-action:pinch-zoom}
.visor.abierta{opacity:1}
.visor img{max-width:100%;max-height:100svh;object-fit:contain;transition:transform .3s;cursor:zoom-in}
.visor.zoom img{transform:scale(2);cursor:zoom-out}

/* Mi selección */
.flota{position:fixed;left:50%;bottom:1rem;translate:-50% 0;z-index:30;width:min(100% - 2rem,32rem);display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.9rem 1.2rem;border-radius:999px;background:var(--texto);color:var(--fondo);font-weight:700;box-shadow:0 16px 40px -12px rgba(0,0,0,.7);animation:c-sube .4s cubic-bezier(.2,.8,.2,1)}
@keyframes c-sube{from{translate:-50% 140%}to{translate:-50% 0}}
.flota .n{background:var(--acento);color:var(--fondo);border-radius:999px;min-width:1.7rem;height:1.7rem;display:inline-grid;place-items:center;margin-right:.5rem;font-size:.8rem;padding:0 .4rem}
.flota.late{animation:c-late .45s}
@keyframes c-late{50%{transform:scale(1.05)}}
.sel-item{display:grid;grid-template-columns:1fr auto;gap:.2rem 1rem;align-items:center;padding:.9rem 0;border-bottom:1px solid var(--linea)}
.sel-item b{font:600 1.02rem var(--serif)}
.sel-item .cantidad{margin:0;gap:.5rem}
.sel-item .mm{width:2rem;height:2rem;font-size:1rem}
.total{display:flex;justify-content:space-between;font-weight:700;font-size:1.15rem;margin-top:1rem}
.total .px{font-size:1.25rem}

.pie-carta{text-align:center;font-size:.74rem;color:var(--suave);padding:2.5rem 1rem 1rem}
.pie-carta a{color:var(--suave)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.buscar input::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
.acciones-local{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem}
.accion{display:inline-flex;align-items:center;justify-content:center;padding:.6rem 1rem;border-radius:999px;border:1px solid var(--linea);font-size:.84rem;font-weight:600;text-decoration:none;color:var(--texto);background:var(--superficie)}
.accion.principal{background:var(--acento);border-color:var(--acento);color:var(--fondo);flex:1 1 100%}
@media (min-width:420px){.accion.principal{flex:1 1 auto}}