:root{
  --rojo:#E3120B; --rojo-osc:#9F0D08; --verde:#16A34A; --oro:#FEC700;
  --fondo:#1A0D0B; --sup:#2A1512; --sup2:#3A1D19; --texto:#FFF7F2; --suave:#D9C3B9;
  --linea:rgba(255,255,255,.12);
  color-scheme:dark;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + var(--barra-height,130px))}
[hidden]{display:none!important}
body{margin:0;min-height:100%;color:var(--texto);font-family:"Nunito",system-ui,-apple-system,Segoe UI,sans-serif;font-size:16px;line-height:1.45;
  background:radial-gradient(120% 60% at 50% -10%,rgba(227,18,11,.28),transparent 60%),var(--fondo)}
img{max-width:100%}
button{font:inherit;cursor:pointer;color:inherit}
:focus-visible{outline:3px solid var(--oro);outline-offset:2px}
.wrap{max-width:900px;margin:0 auto;padding:0 14px}

/* Bienvenida */
.bienv{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:20px;
  background:radial-gradient(circle at 50% 25%,#8E0C07,#2A0705 60%,#0C0302);transition:opacity .25s,visibility .25s}
.bienv.hide{opacity:0;visibility:hidden;pointer-events:none}
.bienv-card{width:min(420px,100%);text-align:center}
.bienv .logo{width:200px;height:200px;margin:0 auto}
.bienv h2{font-family:"Lilita One",Impact,sans-serif;font-weight:400;font-size:34px;margin:18px 0 4px}
.bienv p{margin:0 0 22px;color:var(--suave)}
.logo{border-radius:50%;background:#fff;object-fit:contain;padding:8px;box-shadow:0 0 0 6px rgba(255,255,255,.12),0 14px 40px rgba(0,0,0,.45);display:block}

/* Encabezado */
.portada{width:100%;height:220px;object-fit:cover;display:block;filter:brightness(.7)}
.portada[hidden]{display:none}
.hero{text-align:center;padding:28px 16px 8px}
.hero .logo{width:150px;height:150px;margin:0 auto}
.portada:not([hidden]) + .hero{margin-top:0}
.hero h1{font-family:"Lilita One",Impact,sans-serif;font-weight:400;font-size:clamp(32px,7vw,46px);margin:14px 0 2px;letter-spacing:.5px}
.hero p{margin:2px 0;color:var(--suave);font-weight:600;font-size:15px}
.estado{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:13px;padding:6px 14px;border-radius:999px;background:rgba(22,163,74,.15);color:#7EE2A2;margin-top:10px}
.estado i{width:8px;height:8px;border-radius:50%;background:#22C55E;box-shadow:0 0 0 4px rgba(34,197,94,.25)}
.estado.cerrado{background:rgba(227,18,11,.15);color:#FF9A94}
.estado.cerrado i{background:var(--rojo);box-shadow:0 0 0 4px rgba(227,18,11,.25)}
.acciones{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:18px 0 6px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border-radius:12px;border:1px solid var(--linea);background:rgba(255,255,255,.06);color:var(--texto);font-weight:800;text-decoration:none;transition:transform .1s,background .15s}
.btn:hover{background:rgba(255,255,255,.12)}
.btn:active{transform:scale(.97)}
.btn.rojo{background:var(--rojo);border-color:var(--rojo)}
.btn.verde{background:var(--verde);border-color:var(--verde)}
.btn.grande{width:100%;padding:15px;font-size:17px}
.btn svg{width:18px;height:18px}

/* Barra */
.barra{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;margin:14px -14px 0;padding:12px 14px 10px;background:rgba(26,13,11,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--linea)}
.buscar{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--linea);background:rgba(255,255,255,.07);color:var(--texto);font:inherit;margin-bottom:10px}
.buscar::placeholder{color:#A8928A}
.buscar:focus{border-color:var(--rojo);outline:none}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;padding:8px 15px;border-radius:999px;border:1px solid var(--linea);background:rgba(255,255,255,.06);font-weight:700;font-size:14px;white-space:nowrap}
.chip.on{background:var(--rojo);border-color:var(--rojo)}

/* Menú */
.cat{padding-top:26px}
.cat h2{font-family:"Lilita One",Impact,sans-serif;font-weight:400;font-size:26px;margin:0 0 14px;display:flex;align-items:center;gap:12px}
.cat h2::before{content:"";width:6px;height:26px;border-radius:3px;background:var(--rojo)}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(min-width:640px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.prod{display:flex;flex-direction:column;text-align:left;padding:0;border:1px solid var(--linea);border-radius:16px;overflow:hidden;background:var(--sup);transition:transform .15s,border-color .15s}
.prod:hover{transform:translateY(-2px);border-color:rgba(227,18,11,.6)}
.foto{position:relative;width:100%;aspect-ratio:4/3;background:linear-gradient(135deg,var(--sup2),#1E0E0C);overflow:hidden}
.foto img{width:100%;height:100%;object-fit:cover;display:block}
.foto .ph{position:absolute;inset:0;display:grid;place-items:center}
.foto .ph img{width:62%;height:auto;opacity:.22;filter:grayscale(1) brightness(1.6)}
.tag{position:absolute;top:8px;left:8px;background:var(--oro);color:#281600;font-size:11px;font-weight:900;letter-spacing:.4px;text-transform:uppercase;padding:3px 8px;border-radius:6px}
.prod .txt{padding:12px 12px 14px;display:flex;flex-direction:column;flex:1}
.prod h3{margin:0 0 4px;font-size:16px;font-weight:800;line-height:1.2}
.prod p{margin:0 0 10px;color:var(--suave);font-size:13px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pr{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px}
.precio{font-weight:900;font-size:17px}
.mas{width:32px;height:32px;border-radius:10px;background:var(--rojo);display:grid;place-items:center;font-size:20px;font-weight:800;line-height:1;flex:none}
.vacio{text-align:center;color:var(--suave);padding:40px 0;display:none}
footer{text-align:center;color:#8F7A72;font-size:13px;padding:40px 16px 120px}

/* Carrito flotante */
.fab{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:30;display:none;align-items:center;justify-content:space-between;gap:14px;padding:14px 20px;border:0;border-radius:16px;background:var(--rojo);font-weight:800;box-shadow:0 12px 30px rgba(0,0,0,.45);width:min(520px,calc(100% - 28px))}
.fab.show{display:flex}
.fab .n{background:#fff;color:var(--rojo);border-radius:8px;padding:1px 9px;margin-right:6px}

/* Paneles */
.velo{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:40;display:none}
.velo.show{display:block}
.panel{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--sup);border-radius:22px 22px 0 0;max-height:92%;display:flex;flex-direction:column;transform:translateY(105%);transition:transform .25s ease;padding-bottom:env(safe-area-inset-bottom,0px);max-width:600px;margin:0 auto;box-shadow:0 -14px 40px rgba(0,0,0,.5)}
.panel.show{transform:none}
.panel .cab{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 10px}
.panel .cab h3{font-family:"Lilita One",Impact,sans-serif;font-weight:400;font-size:24px;margin:0}
.x{width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.1);font-size:20px}
.cuerpo{overflow-y:auto;padding:0 18px 12px}
.pie{padding:12px 18px 16px;border-top:1px solid var(--linea)}
.pie .btn{width:100%}
.big{margin-bottom:12px}.big img{width:100%;max-height:260px;object-fit:cover;border-radius:14px;display:block}
.desc{color:var(--suave);margin:0 0 6px}
.opc{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 14px}
.opc label{flex:1;min-width:110px}
.opc input{position:absolute;opacity:0}
.opc span{display:block;text-align:center;padding:11px 8px;border-radius:12px;border:1px solid var(--linea);background:var(--sup2);font-weight:700;font-size:14px}
.opc input:checked + span{background:var(--rojo);border-color:var(--rojo)}
.opc input:focus-visible + span{outline:3px solid var(--oro);outline-offset:2px}
textarea,input.campo{width:100%;padding:12px 13px;border-radius:12px;border:1px solid var(--linea);background:var(--sup2);color:var(--texto);font:inherit;resize:vertical}
textarea:focus,input.campo:focus{border-color:var(--rojo);outline:none}
.lbl{display:block;font-weight:800;font-size:14px;margin:14px 0 6px}
.cant{display:flex;align-items:center;border:1px solid var(--linea);border-radius:12px;overflow:hidden;background:var(--sup2)}
.cant button{width:44px;height:48px;border:0;background:none;font-size:22px;font-weight:800}
.cant b{min-width:30px;text-align:center}
.fila{display:flex;gap:12px;align-items:center}
.fila .btn{flex:1;padding:14px}
.item{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--linea);align-items:center}
.item .e{width:52px;height:52px;border-radius:10px;object-fit:cover;flex:none}
.item .t{flex:1;min-width:0}
.item .t b{display:block}
.item .t small{color:var(--suave);display:block}
.mini{display:flex;align-items:center;gap:6px}
.mini button{width:30px;height:30px;border-radius:50%;border:0;background:rgba(255,255,255,.1);font-weight:800}
.tot{display:flex;justify-content:space-between;padding:4px 0;color:var(--suave)}
.tot.g{color:var(--texto);font-weight:900;font-size:19px;padding-top:8px}
.err{color:#FF8A84;font-weight:700;font-size:14px;margin:8px 0 0;display:none}
.aviso{background:rgba(254,199,0,.12);color:#FFE08A;border:1px solid rgba(254,199,0,.35);border-radius:12px;padding:10px 12px;font-size:14px;font-weight:700;margin:10px 0}
@media (prefers-reduced-motion: reduce){.panel,.bienv,.prod{transition:none}}

/* Controles y paneles adaptados a pantallas pequeñas. */
button,a,input,textarea{-webkit-tap-highlight-color:transparent}
button,a{touch-action:manipulation}
.chips{overscroll-behavior-x:contain;padding:3px 0}
.chip{min-height:44px}
.panel{max-height:92vh;max-height:92dvh;visibility:hidden;pointer-events:none;transition:transform .25s ease,visibility .25s}
.panel.show{visibility:visible;pointer-events:auto}
.panel .cab,.panel .pie{flex-shrink:0}
.panel .cab h3{min-width:0;overflow-wrap:anywhere}
.cuerpo{min-height:0;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch}
.x{width:44px;height:44px;flex-shrink:0}
.cant{flex-shrink:0}
.fila .btn{min-width:0;width:auto}
.mini{flex-shrink:0;gap:4px}
.mini button{width:44px;height:44px}
.item .t{overflow-wrap:anywhere}
.bienv{overflow-y:auto}
.bienv-card{margin:auto}
.estado i{flex-shrink:0}
@media(max-width:380px){
  .wrap{padding:0 12px}
  .barra{margin-left:-12px;margin-right:-12px;padding-left:12px;padding-right:12px}
  .grid{gap:8px}
  .prod .txt{padding:10px 8px}
  .precio{font-size:16px}
  .pr{gap:4px}
  .mas{width:28px;height:28px}
  .panel .cab,.cuerpo,.pie{padding-left:12px;padding-right:12px}
  .fila{gap:8px}
  .fila .btn{padding:12px 8px;font-size:14px}
  .item{gap:8px;flex-wrap:wrap}
  .item .t{flex-basis:100px}
  .item .e{width:40px;height:40px}
}
@media(hover:none){.prod:hover{transform:none}}
@media(prefers-reduced-motion:reduce){.panel,.btn{transition:none}}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
button:disabled{opacity:.5;cursor:default;transform:none}
#ppError:not([hidden]){display:block}
.aviso a{color:inherit;text-decoration:underline;font-weight:800}
input[aria-invalid="true"]{border-color:#FF8A84}

/* Botón para borrar de un toque el texto ya escrito en un campo */
.campo-wrap{position:relative}
.campo-wrap .campo,.campo-wrap textarea{padding-right:42px}
.limpiarCampo{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:34px;height:34px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:var(--suave);font-size:18px;line-height:1;display:grid;place-items:center}
.limpiarCampo:hover{background:rgba(255,255,255,.2)}
.campo-wrap textarea ~ .limpiarCampo{top:5px;transform:none}