/* EL PAN DIVINO · estilo iOS 26 "Liquid Glass" · vista de teléfono */
:root{
  --ink:#2b1a0e; --sub:#7d6650; --brand:#e8691a; --brand2:#ff9a3d; --deep:#6b2d0c;
  --glass:rgba(255,255,255,.52); --glass2:rgba(255,255,255,.72); --edge:rgba(255,255,255,.75);
  --shadow:0 10px 34px rgba(110,50,10,.16); --bg:#fdf3e3; --ok:#2f9e57;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Rounded",Inter,"Segoe UI",system-ui,sans-serif;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --status-h:0px;
  --top-pad:calc(var(--safe-top) + var(--status-h));
}
@media(min-width:760px){ :root{ --status-h:48px } }
@media(prefers-color-scheme:dark){
  :root{--ink:#fbeedd;--sub:#c9ad8f;--glass:rgba(60,36,22,.5);--glass2:rgba(70,42,26,.72);--edge:rgba(255,255,255,.16);--shadow:0 10px 34px rgba(0,0,0,.4);--bg:#1b0f08}
}
*{box-sizing:border-box;margin:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font:16px/1.5 var(--font);color:var(--ink);overflow:hidden;background:#000;
}
#sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mark{width:26px;height:26px;flex:none;fill:currentColor;stroke:none}

/* ===== estructura: dispositivo + pantalla ===== */
#device{height:100%;height:100dvh;display:grid;place-items:center;align-content:center;justify-content:center;overflow:hidden}
#phone{position:relative;height:100%;width:100%}
#glass-screen{position:relative;width:100%;height:100%;overflow:hidden;background:var(--bg)}
#screen{
  position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  padding-top:var(--top-pad);padding-bottom:140px;
  background:radial-gradient(560px 460px at 6% 0,#ffae5a99,transparent),
             radial-gradient(660px 560px at 100% 16%,#ff7a4a77,transparent),
             radial-gradient(820px 660px at 40% 100%,#ffd78a88,transparent),var(--bg);
}
#screen::-webkit-scrollbar{display:none}
#chrome{position:absolute;inset:0;pointer-events:none;z-index:40}

/* ===== vidrio (Liquid Glass) ===== */
.glass,.card,.cat,.row,.sum,.perks li,.detail,.login,.ok,.search,.form input,.opt,.menu,#toast,header,nav{
  background:var(--glass);
  -webkit-backdrop-filter:blur(26px) saturate(180%);backdrop-filter:blur(26px) saturate(180%);
  border:1px solid var(--edge);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),var(--shadow);
}

/* ===== pantalla de carga ===== */
#splash{
  position:absolute;inset:0;z-index:50;overflow:hidden;pointer-events:auto;
  display:grid;place-content:center;justify-items:center;gap:24px;color:#fff;text-align:center;
  background:radial-gradient(120% 92% at 16% 0%,#ffb45f,transparent 58%),
             radial-gradient(135% 120% at 92% 102%,#c4521a,transparent 56%),
             linear-gradient(160deg,#8a3410,#451806);
  transition:opacity .6s ease,transform .6s ease,filter .6s ease;
}
#splash.out{opacity:0;transform:scale(1.05);filter:blur(9px);pointer-events:none}
#splash .blobs{position:absolute;inset:0;overflow:hidden;pointer-events:none}
#splash .blobs span{position:absolute;border-radius:50%;filter:blur(42px);opacity:.5;animation:float 9s ease-in-out infinite}
#splash .blobs span:nth-child(1){width:220px;height:220px;background:#ffd08a;top:-50px;left:-50px}
#splash .blobs span:nth-child(2){width:260px;height:260px;background:#ff7a3c;bottom:-70px;right:-60px;animation-delay:-3s}
#splash .blobs span:nth-child(3){width:170px;height:170px;background:#ffb45f;top:42%;right:6%;animation-delay:-6s}
@keyframes float{50%{transform:translate3d(0,-18px,0) scale(1.06)}}

.logo-big{
  position:relative;display:grid;justify-items:center;gap:6px;padding:28px 36px 30px;border-radius:42px;
  background:rgba(255,255,255,.24);
  -webkit-backdrop-filter:blur(36px) saturate(160%);backdrop-filter:blur(36px) saturate(160%);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:inset 0 1px 0 #fff9,0 26px 64px #0005;
  animation:rise .8s cubic-bezier(.2,.9,.25,1) both;
}
@keyframes rise{from{opacity:0;transform:translateY(16px) scale(.94)}}
.logo-big .mark{width:58px;height:58px;color:#fff;filter:drop-shadow(0 6px 16px #0004)}
.logo-big b{font-size:27px;font-weight:800;color:#fff;letter-spacing:.02em}
.logo-big small{color:#ffe7cf;font-size:13.5px}
.bar{width:190px;height:7px;border-radius:99px;background:rgba(255,255,255,.28);overflow:hidden;box-shadow:inset 0 1px 0 #fff4;animation:rise .8s .1s cubic-bezier(.2,.9,.25,1) both}
.bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#fff,#ffd9a8);animation:load 1.5s cubic-bezier(.5,0,.2,1) forwards}
@keyframes load{to{width:100%}}
#splash p{font-size:13.5px;color:#ffe7cf;letter-spacing:.05em;animation:rise .8s .18s cubic-bezier(.2,.9,.25,1) both}

/* ===== barra de estado ===== */
.statusbar{
  position:absolute;top:0;left:0;right:0;height:var(--status-h);z-index:55;pointer-events:none;
  display:none;align-items:center;justify-content:space-between;padding:0 34px 0 38px;
  font-size:15px;font-weight:650;letter-spacing:.3px;color:var(--ink);
}
@media(min-width:760px){ .statusbar{display:flex} }
.statusbar .sys{display:flex;align-items:center;gap:6px}
.statusbar .sys svg{height:12px;width:auto;fill:currentColor;stroke:none}
/* ===== cabecera ===== */
header{
  position:sticky;top:calc(var(--top-pad) + 6px);z-index:10;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:8px 14px 0;padding:9px 10px 9px 16px;border-radius:99px;
}
header[hidden]{display:none}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:17px;letter-spacing:-.02em}
.brand .mark{color:var(--brand)}
.cart{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--glass2);border:1px solid var(--edge)}
.cart .ic{width:21px;height:21px}
#count{position:absolute;top:-4px;right:-4px;background:#ff3b30;color:#fff;font-size:11px;font-weight:700;border-radius:99px;min-width:19px;text-align:center;padding:0 5px}

/* ===== barra de pestañas (inferior) ===== */
nav{
  position:absolute;left:12px;right:12px;bottom:calc(var(--safe-bottom) + 18px);z-index:30;
  display:flex;gap:2px;padding:7px;border-radius:28px;pointer-events:auto;
}
nav a{
  flex:1;display:grid;justify-items:center;gap:3px;font-size:10.5px;font-weight:650;color:var(--sub);
  padding:7px 2px 5px;border-radius:20px;
  transition:color .25s,background .25s,transform .25s cubic-bezier(.2,.9,.25,1);
}
nav a .ic{width:23px;height:23px;transition:transform .3s cubic-bezier(.2,.9,.25,1)}
nav a.on{color:var(--brand);background:var(--glass2);box-shadow:inset 0 1px 0 #fff9,0 2px 10px rgba(110,50,10,.14)}
nav a.on .ic{transform:translateY(-1px) scale(1.06)}
nav a:active{transform:scale(.92)}

/* ===== contenido ===== */
main{padding:16px 16px 0}
h1,h2,h3,.brand,.logo-big b{font-family:var(--font);letter-spacing:-.025em;color:var(--ink)}
a{color:inherit;text-decoration:none}button,input{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--brand2);outline-offset:3px}

/* saludo */
.hello{display:grid;gap:1px;margin:2px 4px 14px}
.hello b{font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1.15}
.hello span{color:var(--sub);font-size:14px}

/* buscador */
.search{width:100%;padding:15px 22px;border-radius:99px;margin-bottom:16px}

/* ===== slider ===== */
.slider{position:relative;border-radius:30px;overflow:hidden;box-shadow:0 18px 40px rgba(110,50,10,.22)}
.slides{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none}
.slides::-webkit-scrollbar{display:none}
.slide{
  position:relative;flex:0 0 100%;height:228px;scroll-snap-align:start;
  background-size:cover;background-position:center;display:flex;align-items:flex-end;color:#fff;
}
.slide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,12,4,.02) 22%,rgba(28,12,4,.84))}
.sl-copy{position:relative;z-index:1;display:block;padding:18px 20px 20px;max-width:88%}
.sl-copy b{display:block;font-size:21px;font-weight:800;line-height:1.15;text-shadow:0 2px 10px rgba(0,0,0,.35)}
.sl-copy>span{display:block;font-size:13px;color:#ffe6cd;margin:4px 0 11px}
.pill{display:inline-block;font-style:normal;font-weight:700;font-size:13px;padding:9px 17px;border-radius:99px;
  background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.6);color:#fff;
  -webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%)}
.dots{position:absolute;right:16px;bottom:20px;display:flex;gap:6px;z-index:2}
.dot{width:8px;height:8px;border-radius:99px;border:0;padding:0;background:rgba(255,255,255,.55);cursor:pointer;transition:width .3s,background .3s}
.dot.on{width:22px;background:#fff}

/* ===== ventajas ===== */
.perks{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.perks li{border-radius:22px;padding:14px 10px;display:grid;justify-items:center;gap:4px;text-align:center}
.perks .ic{width:24px;height:24px;color:var(--brand)}
.perks b{font-size:12.5px;color:var(--ink);font-weight:750;line-height:1.25}
.perks span{font-size:11px;color:var(--sub)}

/* ===== títulos de sección ===== */
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:28px 4px 12px}
.sec-head h2{margin:0}
.sec-head a{color:var(--brand);font-weight:700;font-size:14px}
h2{margin:28px 4px 12px;font-size:23px;font-weight:800}

/* ===== categorías con foto ===== */
.cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:11px}
.cat{border-radius:24px;padding:9px 9px 13px;text-align:center;font-weight:700;font-size:12.5px;
  display:grid;gap:8px;justify-items:center;transition:transform .25s cubic-bezier(.2,.9,.25,1)}
.cat:hover{transform:translateY(-4px) scale(1.02)}
.cat:active{transform:scale(.96)}
.catpic{position:relative;width:100%;aspect-ratio:1;border-radius:17px;overflow:hidden;display:grid;place-items:center;padding:9px;
  background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.85),rgba(255,214,150,.55))}
.catpic svg{width:100%;display:block}
.catpic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.catn{line-height:1.2}

/* ===== tarjetas de producto ===== */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.card{border-radius:26px;padding:9px 9px 15px;display:grid;gap:2px;position:relative;transition:transform .25s cubic-bezier(.2,.9,.25,1)}
.card:hover{transform:translateY(-3px)}
.card:active{transform:scale(.98)}
.pic{position:relative;overflow:hidden;background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.85),rgba(255,214,150,.55));border-radius:20px;padding:14px;cursor:pointer;margin-bottom:6px}
.pic svg{width:100%;display:block}
.pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card h3{font-size:15px;padding:0 6px;font-weight:700;line-height:1.3}.price{color:var(--brand);font-weight:800;padding:0 6px}
.add{position:absolute;right:12px;bottom:12px;width:40px;height:40px;border-radius:50%;border:0;background:linear-gradient(180deg,var(--brand2),var(--brand));color:#fff;font-size:25px;line-height:1;cursor:pointer;box-shadow:inset 0 1px 0 #fff8,0 8px 16px rgba(232,105,26,.45);transition:transform .2s cubic-bezier(.2,.9,.25,1)}
.add:active{transform:scale(.88)}

/* ===== botones ===== */
.btn{display:inline-block;border:0;cursor:pointer;color:#fff;font-weight:700;padding:14px 26px;border-radius:99px;text-align:center;background:var(--deep);box-shadow:inset 0 1px 0 #fff5;transition:transform .22s cubic-bezier(.2,.9,.25,1)}
.btn.alt{background:linear-gradient(180deg,var(--brand2),var(--brand));box-shadow:inset 0 1px 0 #fff8,0 10px 24px rgba(232,105,26,.45)}
.btn.ghost{background:rgba(255,255,255,.22);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--edge);color:var(--ink)}
.btn.full{width:100%;display:block;margin-top:8px}.btn:active{transform:scale(.96)}

/* ===== detalle ===== */
.back{background:none;border:0;color:var(--brand);font-weight:700;cursor:pointer;display:inline-block;margin:0 4px 6px;font-size:15px}
.detail{display:grid;gap:20px;border-radius:32px;padding:18px}.detail .pic{padding:26px;cursor:default}
.qty{display:inline-flex;align-items:center;gap:10px}.qty button{width:36px;height:36px;border-radius:50%;border:1px solid var(--edge);background:var(--glass2);cursor:pointer;font-size:18px}.qty button.p{background:var(--brand);color:#fff;border:0}

/* ===== carrito / pedidos ===== */
.row{display:flex;align-items:center;gap:14px;border-radius:24px;padding:10px;margin-bottom:10px}
.row .pic{width:78px;padding:8px;margin:0;flex:none}.row .info{flex:1}
.del{background:none;border:0;cursor:pointer;display:grid;place-items:center;padding:4px;color:var(--sub)}.del .ic{width:21px;height:21px}
.sum{border-radius:24px;padding:18px;display:grid;gap:6px;margin:14px 0}.sum div{display:flex;justify-content:space-between}.sum .t{font-weight:800;font-size:20px;border-top:1px solid var(--edge);padding-top:8px}

/* ===== formularios ===== */
.form{display:grid;gap:12px}.form input{padding:15px 18px;border-radius:18px;width:100%}
.opts{display:flex;gap:6px;padding:5px;border-radius:99px;background:var(--glass);border:1px solid var(--edge)}
.opt{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:11px 6px;border-radius:99px;border:0;background:transparent;box-shadow:none;font-weight:700;cursor:pointer;font-size:14px;-webkit-backdrop-filter:none;backdrop-filter:none;transition:.2s}
.opt .ic{width:17px;height:17px}
.opt.on{background:var(--glass2);color:var(--brand);box-shadow:inset 0 1px 0 #fff9,0 2px 10px rgba(110,50,10,.15)}
.center{margin:26px auto;text-align:center;display:grid;gap:12px}
.ok{border-radius:32px;padding:28px;background:rgba(220,250,230,.55)}.ok .tick{font-size:58px;color:var(--ok);display:grid;place-items:center}.ok .tick .ic{width:62px;height:62px;stroke-width:2.2}
.login{border-radius:32px;padding:28px}
.menu{border-radius:24px;padding:0 16px}
.menu a,.menu button{display:flex;justify-content:space-between;width:100%;padding:16px 4px;border:0;border-bottom:1px solid var(--edge);background:none;cursor:pointer;text-align:left}
.menu>:last-child{border:0}
.empty{text-align:center;padding:40px 0;color:var(--sub)}
footer{text-align:center;padding:28px 0 10px;color:var(--sub);font-size:13px}

#toast{position:absolute;left:50%;bottom:calc(var(--safe-bottom) + 122px);transform:translateX(-50%) translateY(16px);padding:11px 20px;border-radius:99px;opacity:0;transition:.3s;z-index:35;pointer-events:none;font-weight:600;font-size:14px}
#toast.show{opacity:1;transform:translateX(-50%)}

/* ===== pantalla centrada (solo en pantallas grandes) ===== */
@media(min-width:760px){
  #phone{
    width:393px;height:852px;flex:none;padding:0;border-radius:0;
    transform:scale(var(--ps,1));transform-origin:center center;
    background:none;box-shadow:none;
  }
  #glass-screen{border-radius:0;box-shadow:none}
  #screen{scrollbar-gutter:stable}
}

/* ===== control de tamaño (solo PC) ===== */
#zoom{
  position:fixed;right:20px;bottom:20px;z-index:80;display:flex;gap:2px;padding:4px;border-radius:99px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);
  -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 12px 32px rgba(0,0,0,.45);
}
#zoom button{width:36px;height:30px;border:0;border-radius:99px;background:none;color:#e6d5c3;font-weight:750;font-size:12.5px;cursor:pointer;transition:background .2s,color .2s}
#zoom button:hover{color:#fff}
#zoom button.on{background:rgba(255,255,255,.24);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
@media(max-width:759px){ #zoom{display:none} }

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .bar i{width:100%}
}