/* Ser Carta Esencial · vista app */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,ul{margin:0;padding:0}
ul{list-style:none}
img{display:block;max-width:100%}
button,input{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
a{color:inherit;text-decoration:none}

:root{
  --bg:#f7f1e8;--card:#fff;--txt:#2a211b;--muted:#7b6e63;--acc:#d4643b;--acc2:#2f5d50;--acc-rgb:212,100,59;
  --line:rgba(0,0,0,.07);
  --display:"Fraunces",Georgia,serif;
  --sans:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --app:500px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --sh:0 1px 2px rgba(40,25,10,.04),0 8px 24px rgba(40,25,10,.07);
}
.is-dark{--line:rgba(255,255,255,.08);--sh:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.35)}

body.ce{background:var(--bg);color:var(--txt);font-family:var(--sans);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
body.ce.is-locked{overflow:hidden}
@media (min-width:600px){
  body.ce{background:
    radial-gradient(circle at 15% 20%,rgba(var(--acc-rgb),.16),transparent 40%),
    radial-gradient(circle at 85% 80%,rgba(var(--acc-rgb),.12),transparent 45%),var(--bg)}
  .ce-app{box-shadow:0 0 0 1px var(--line),0 30px 80px rgba(0,0,0,.12)}
}
.ce-app{position:relative;max-width:var(--app);margin:0 auto;background:var(--bg);min-height:100vh;padding-bottom:110px;overflow-x:clip}

/* ---------- Portada ---------- */
.ce-cover{position:relative;height:250px;overflow:hidden}
.ce-cover__img{position:absolute;inset:0;background:linear-gradient(135deg,var(--acc),var(--acc2))}
.ce-cover__img img{width:100%;height:100%;object-fit:cover;animation:ceKen 14s var(--ease) both}
.ce-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),transparent 40%,rgba(0,0,0,.2))}
@keyframes ceKen{from{transform:scale(1.15)}to{transform:scale(1)}}
.ce-cover__ig{position:absolute;z-index:2;right:16px;top:calc(16px + env(safe-area-inset-top));width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.9);color:#222;box-shadow:0 4px 12px rgba(0,0,0,.15)}
.ce-cover__ig svg{width:20px;height:20px}

.ce-card{background:var(--card);border-radius:24px;box-shadow:var(--sh)}
.ce-intro{position:relative;z-index:2;margin:-56px 16px 0;padding:46px 20px 20px;text-align:center;animation:ceUp .8s .1s var(--ease) both}
@keyframes ceUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.ce-logo{position:absolute;left:50%;top:-38px;width:76px;height:76px;margin-left:-38px;border-radius:50%;background:var(--acc);border:4px solid var(--card);box-shadow:0 8px 20px rgba(0,0,0,.15);display:grid;place-items:center;overflow:hidden}
.ce-logo img{width:100%;height:100%;object-fit:cover}
.ce-logo span{font-family:var(--display);font-weight:600;font-size:34px;color:#fff;line-height:1}
.ce-name{font-family:var(--display);font-weight:600;font-size:32px;line-height:1.05;letter-spacing:-.01em}
.ce-sub{margin-top:6px;font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--acc)}
.ce-hello{margin:12px auto 0;max-width:330px;color:var(--muted);font-size:14.5px}
.ce-quick{display:flex;justify-content:center;gap:8px;margin-top:18px}
.ce-q{flex:1;max-width:96px;display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 4px;border-radius:16px;background:rgba(var(--acc-rgb),.09);color:var(--txt);font-size:11.5px;font-weight:600;transition:transform .2s,background .2s}
.ce-q:active{transform:scale(.95);background:rgba(var(--acc-rgb),.18)}
.ce-q svg{width:21px;height:21px;color:var(--acc)}

/* ---------- Barra fija ---------- */
.ce-sticky{position:sticky;top:0;z-index:20;padding:14px 0 8px;background:var(--bg);transition:box-shadow .3s}
.ce-sticky.is-stuck{box-shadow:0 10px 24px -14px rgba(0,0,0,.35)}
.ce-search{display:flex;align-items:center;gap:10px;margin:0 16px;padding:0 14px;height:48px;border-radius:16px;background:var(--card);box-shadow:var(--sh);border:1.5px solid transparent;transition:border-color .2s}
.ce-search:focus-within{border-color:var(--acc)}
.ce-search>svg{width:20px;height:20px;color:var(--muted);flex:0 0 auto}
.ce-search input{flex:1;min-width:0;border:0;outline:0;background:none;font-size:16px;-webkit-appearance:none;appearance:none}
.ce-search input::placeholder{color:var(--muted)}
.ce-search input::-webkit-search-cancel-button{display:none}
.ce-search__x{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(var(--acc-rgb),.12);color:var(--acc)}
.ce-search__x svg{width:14px;height:14px}
.ce-search__x[hidden]{display:none}
.ce-tabs{display:flex;gap:8px;overflow-x:auto;padding:12px 16px 6px;scrollbar-width:none;scroll-snap-type:x proximity}
.ce-tabs::-webkit-scrollbar{display:none}
.ce-tab{flex:0 0 auto;scroll-snap-align:center;display:flex;align-items:center;gap:8px;padding:5px 14px 5px 5px;border-radius:999px;background:var(--card);box-shadow:var(--sh);font-size:13.5px;font-weight:600;white-space:nowrap;transition:background .3s,color .3s,transform .2s}
.ce-tab:not(:has(img)){padding-left:14px}
.ce-tab img{width:30px;height:30px;border-radius:50%;object-fit:cover}
.ce-tab.is-active{background:var(--acc);color:#fff}
.ce-tab:active{transform:scale(.96)}

/* ---------- Destacados ---------- */
.ce-main{padding-top:6px}
.ce-h2{font-family:var(--display);font-weight:600;font-size:25px;line-height:1.15;letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
.ce-h2 svg{width:22px;height:22px;color:var(--acc)}
.ce-feat{padding:14px 0 6px}
.ce-feat .ce-h2{padding:0 20px}
.ce-feat__track{display:flex;gap:12px;overflow-x:auto;padding:14px 16px 12px;scroll-snap-type:x mandatory;scrollbar-width:none}
.ce-feat__track::-webkit-scrollbar{display:none}
.ce-fcard{position:relative;flex:0 0 72%;max-width:300px;aspect-ratio:4/5;border-radius:22px;overflow:hidden;scroll-snap-align:start;box-shadow:var(--sh);transition:transform .25s var(--ease)}
.ce-fcard:active{transform:scale(.97)}
.ce-fcard img{width:100%;height:100%;object-fit:cover}
.ce-fcard__shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.75))}
.ce-fcard__txt{position:absolute;left:16px;right:16px;bottom:16px;color:#fff;display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.ce-fcard__txt strong{font-family:var(--display);font-weight:600;font-size:22px;line-height:1.1}
.ce-fcard__txt em{font-style:normal;font-weight:700;font-size:14px;background:var(--acc);padding:6px 11px;border-radius:999px;white-space:nowrap}

/* ---------- Secciones y platos ---------- */
.ce-sec{padding:22px 16px 4px;scroll-margin-top:128px}
.ce-sec__head{padding:0 4px 12px}
.ce-sec__head p{margin-top:4px;color:var(--muted);font-size:14px}
.ce-list{display:flex;flex-direction:column;gap:12px}
.ce-dish{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.ce-dish.is-in{opacity:1;transform:none}
.ce-dish__btn{display:flex;gap:14px;width:100%;padding:14px;border-radius:22px;background:var(--card);box-shadow:var(--sh);transition:transform .2s var(--ease);-webkit-tap-highlight-color:transparent}
.ce-dish__btn:active{transform:scale(.98)}
.ce-dish__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.ce-dish__name{font-family:var(--display);font-weight:600;font-size:18.5px;line-height:1.2}
.ce-dish__desc{font-size:13.5px;color:var(--muted);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ce-dish__foot{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin-top:auto;padding-top:4px}
.ce-price{font-weight:700;font-size:15.5px;color:var(--acc)}
.ce-price small{font-weight:500;font-size:11.5px;color:var(--muted)}
.ce-price--2{font-size:14px;opacity:.85}
.ce-dish__img{flex:0 0 108px;width:108px;height:108px;border-radius:16px;overflow:hidden;background:rgba(var(--acc-rgb),.1)}
.ce-dish__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.ce-dish__btn:hover .ce-dish__img img{transform:scale(1.05)}
.ce-dish.is-off .ce-dish__btn{opacity:.5}
.ce-dish.is-off .ce-dish__img img{filter:grayscale(1)}
.ce-dish.is-hidden,.ce-sec.is-hidden,.ce-feat.is-hidden{display:none}

/* Distintivos */
.ce-badges{display:flex;flex-wrap:wrap;gap:5px}
.ce-b{font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.02em;padding:3px 9px;border-radius:999px;background:rgba(var(--acc-rgb),.12);color:var(--acc)}
.ce-b--vegano,.ce-b--vegetariano{background:rgba(70,150,80,.13);color:#3d8a47}
.ce-b--singluten{background:rgba(200,150,40,.15);color:#a8781a}
.ce-b--picante{background:rgba(220,60,40,.12);color:#d0402a}
.ce-b--nuevo{background:var(--acc2);color:#fff}
.ce-b--off{background:rgba(0,0,0,.08);color:var(--muted)}
.is-dark .ce-b--off{background:rgba(255,255,255,.1)}
.is-dark .ce-b--vegano,.is-dark .ce-b--vegetariano{color:#7fd08a}
.is-dark .ce-b--singluten{color:#f0c35a}
.is-dark .ce-b--picante{color:#ff8a72}
.is-dark .ce-b--nuevo{color:#15171c}

/* Iconos de alérgenos */
.ce-algs{display:inline-flex;gap:3px;margin-left:auto}
.ce-alg{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;font-style:normal;font-size:8.5px;font-weight:700;letter-spacing:0;color:#fff;background:#9a8f85;flex:0 0 auto}
.ce-alg--gluten{background:#c99a2e}.ce-alg--crustaceos{background:#e0623f}.ce-alg--huevo{background:#e8b923}
.ce-alg--pescado{background:#3b7fc4}.ce-alg--cacahuete{background:#a0632e}.ce-alg--soja{background:#6a9a3b}
.ce-alg--lacteos{background:#5aa7d6}.ce-alg--frutos{background:#8a5a3b}.ce-alg--apio{background:#62a65a}
.ce-alg--mostaza{background:#c7a51c}.ce-alg--sesamo{background:#b98d5a}.ce-alg--sulfitos{background:#8e3b6e}
.ce-alg--altramuces{background:#d18a2a}.ce-alg--moluscos{background:#3a8f8a}.ce-alg--more{background:var(--muted)}

.ce-noresults{padding:40px 24px;text-align:center;color:var(--muted)}
.ce-noresults[hidden]{display:none}
.ce-empty{padding:40px 24px;text-align:center;color:var(--muted)}

.ce-legend{margin:30px 16px 0;padding:18px;border-radius:22px;background:var(--card);box-shadow:var(--sh)}
.ce-legend h3{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.ce-legend div{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px}
.ce-legend span{display:flex;align-items:center;gap:8px;font-size:12.5px}

.ce-foot{text-align:center;padding:30px 24px 10px;color:var(--muted);font-size:12px}
.ce-foot__name{font-family:var(--display);font-weight:600;font-size:22px;color:var(--txt);margin-bottom:8px}
.ce-foot__by{margin-top:12px;font-size:11px}
.ce-foot__by a{color:var(--acc);font-weight:600}

/* ---------- Flotantes ---------- */
.ce-fab{position:fixed;z-index:30;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom));width:100%;max-width:var(--app);padding:0 16px;display:flex;justify-content:flex-end;gap:10px;pointer-events:none}
.ce-fab>*{pointer-events:auto}
.ce-fab__wa{display:flex;align-items:center;gap:8px;height:52px;padding:0 20px 0 16px;border-radius:999px;background:#25d366;color:#fff;font-weight:700;font-size:14.5px;box-shadow:0 10px 26px rgba(37,211,102,.4);transition:transform .2s}
.ce-fab__wa:active{transform:scale(.95)}
.ce-fab__wa svg{width:24px;height:24px}
.ce-fab__up{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--card);color:var(--txt);box-shadow:var(--sh);opacity:0;transform:translateY(20px) scale(.8);transition:all .35s var(--ease);pointer-events:none}
.ce-fab__up.is-on{opacity:1;transform:none;pointer-events:auto}
.ce-fab__up svg{width:22px;height:22px}

/* ---------- Ficha ---------- */
.ce-overlay{position:fixed;inset:0;z-index:40;background:rgba(20,12,6,.5);opacity:0;pointer-events:none;transition:opacity .35s}
.ce-overlay.is-open{opacity:1;pointer-events:auto}
.ce-sheet{position:fixed;z-index:50;left:50%;bottom:0;width:100%;max-width:var(--app);max-height:90vh;max-height:90svh;overflow-y:auto;overscroll-behavior:contain;background:var(--card);border-radius:28px 28px 0 0;transform:translate(-50%,105%);transition:transform .5s var(--ease);padding-bottom:calc(20px + env(safe-area-inset-bottom))}
.ce-sheet.is-open{transform:translate(-50%,0)}
.ce-sheet.is-drag{transition:none}
.ce-x{position:absolute;z-index:3;right:14px;top:14px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.92);color:#222;box-shadow:0 4px 14px rgba(0,0,0,.15)}
.ce-x svg{width:18px;height:18px}
.ce-sheet__img{aspect-ratio:4/3;background:rgba(var(--acc-rgb),.1);overflow:hidden}
.ce-sheet__img img{width:100%;height:100%;object-fit:cover}
.ce-sheet__img:empty{display:none}
.ce-sheet__body{padding:20px 22px 6px}
.ce-sheet--info .ce-sheet__body{padding-top:30px}
.ce-sheet__sec{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--acc)}
.ce-sheet__name{font-family:var(--display);font-weight:600;font-size:28px;line-height:1.1;margin-top:4px;padding-right:44px}
.ce-sheet__img:not(:empty)+.ce-sheet__body .ce-sheet__name{padding-right:0}
.ce-sheet__badges{margin-top:10px}
.ce-sheet__badges:empty{display:none}
.ce-sheet__desc{margin-top:12px;color:var(--muted);font-size:15px;line-height:1.6}
.ce-sheet__prices{display:flex;gap:10px;margin-top:18px}
.ce-pcard{flex:1;padding:12px 16px;border-radius:18px;background:rgba(var(--acc-rgb),.09)}
.ce-pcard small{display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.ce-pcard b{font-size:24px;font-weight:700;color:var(--acc)}
.ce-sheet__algs{margin-top:18px}
.ce-sheet__algs[hidden]{display:none}
.ce-sheet h4{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.ce-sheet__algs div{display:flex;flex-wrap:wrap;gap:8px}
.ce-sheet__algs span{display:flex;align-items:center;gap:6px;padding:4px 12px 4px 4px;border-radius:999px;background:rgba(var(--acc-rgb),.07);font-size:13px;font-weight:500}
.ce-info{margin-top:18px}
.ce-info p{font-size:15.5px;line-height:1.6}
.ce-info__btns{display:flex;gap:10px;margin-top:22px}
.ce-btn{flex:1;display:flex;align-items:center;justify-content:center;height:50px;border-radius:16px;background:var(--acc);color:#fff;font-weight:700;font-size:14.5px}
.ce-btn--line{background:transparent;color:var(--txt);border:1.5px solid var(--line)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .ce-dish{opacity:1;transform:none}
}
