@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600..800&family=Instrument+Sans:wght@400..700&display=swap');
:root{--brand:#0F4C5C;--on-brand:#fff;--tint:color-mix(in oklab,var(--brand) 5%,#fff);--tint2:color-mix(in oklab,var(--brand) 11%,#fff);--deep:color-mix(in oklab,var(--brand) 42%,#06060c);--ink:color-mix(in oklab,var(--brand) 22%,#0c0c14);--teal:var(--deep);--coral:var(--brand);--coral-d:#B3261E;--cream:var(--tint);--card:#fff;--line:color-mix(in oklab,var(--brand) 15%,#ececf0);--muted:color-mix(in oklab,var(--brand) 22%,#5b5b66);--display:'Bricolage Grotesque','Manrope',system-ui,sans-serif;--text:'Instrument Sans','Manrope',system-ui,sans-serif;--lift:0 1px 2px color-mix(in oklab,var(--deep) 12%,transparent),0 14px 34px -14px color-mix(in oklab,var(--deep) 34%,transparent);--spring:cubic-bezier(.2,1.3,.4,1)}
html{scroll-behavior:smooth}
body{font-family:var(--text);font-size:16px;letter-spacing:-.003em;-webkit-font-smoothing:antialiased;background:var(--tint)}
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.025em;color:var(--deep);font-variation-settings:"opsz" 96}
a{color:var(--deep)}
:focus-visible{outline:3px solid color-mix(in oklab,var(--brand) 55%,#fff);outline-offset:2px}
.btn{font:700 16px var(--text);border-radius:16px;background:var(--deep);border-color:var(--deep);min-height:52px;transition:transform .12s ease,filter .12s ease}
.btn:active{transform:scale(.97)}
.btn.coral{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.btn.ghost{background:transparent;color:var(--deep);border-color:var(--line)}
.btn.sm{min-height:44px;border-radius:12px;font-size:14px}
.btn.wa{background:#128C4B;border-color:#128C4B}
label{color:var(--deep);font-weight:600}
input,select,textarea{font:500 16px var(--text);border:1.5px solid var(--line);border-radius:14px;background:#fff;min-height:52px}
input:focus,select:focus,textarea:focus{outline:3px solid color-mix(in oklab,var(--brand) 28%,transparent);outline-offset:0;border-color:var(--brand)}
input[type=checkbox]{accent-color:var(--brand)}
.card{border:0;border-radius:22px;box-shadow:var(--lift);padding:22px}
.chip{font:600 14px var(--text);border:0;background:#fff;border-radius:999px;min-width:0;padding:10px 16px;box-shadow:inset 0 0 0 1.5px var(--line)}
.chip b{font-family:var(--display)}
.chip[aria-pressed=true],.chip.is-on{background:var(--deep);color:#fff;box-shadow:none}
.slot,.svc{font-family:var(--text);border-color:var(--line)}
.err{border-radius:14px}
#toast{background:var(--deep);border-radius:16px}
.bhead{background:var(--brand);color:var(--on-brand);padding:0;position:relative;overflow:hidden}
.bhead .narrow{padding:44px 20px 64px;position:relative}
.bhead h1{color:var(--on-brand);font-size:var(--name-size,56px);line-height:.92;letter-spacing:-.045em;overflow-wrap:anywhere;animation:pielIn .7s var(--spring) both}
.bhead p,.bhead a{color:var(--on-brand)}
.bhead #bAbout{margin:14px 0 0;font-size:17px;max-width:32ch;opacity:.92}
.bhead #bAddr{margin:10px 0 0;font-size:14px;opacity:.82}
.bhead #bHours{display:inline-flex;margin:14px 0 0;padding:7px 13px;border-radius:999px;font-size:14px;font-weight:600;background:color-mix(in oklab,var(--on-brand) 16%,transparent)}
.bhead .piel-logo{width:60px;height:60px;border-radius:18px;object-fit:cover;display:block;margin-bottom:18px;box-shadow:0 8px 22px rgba(0,0,0,.25)}
.bhead::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:26px;background:var(--tint);border-radius:26px 26px 0 0}
main.narrow{margin-top:0;padding:0 16px 130px}
.cats{top:0;margin:0 -16px;padding:10px 16px;background:color-mix(in oklab,var(--tint) 86%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.chips{scrollbar-width:none;padding-bottom:0}.chips::-webkit-scrollbar{display:none}
#menu{margin-top:6px}
#menu>.card{background:transparent;box-shadow:none;padding:18px 0 6px;border-radius:0}
#menu>.card>h2{font-size:30px!important;line-height:1;margin-bottom:6px}
.prod{padding:15px 0;gap:14px;border-bottom:1px solid var(--line);align-items:center}
.prod>div:first-of-type{flex:1;min-width:0}
.prod strong{font:700 18px/1.2 var(--display);letter-spacing:-.015em;color:var(--ink);display:block;font-variation-settings:"opsz" 24}
.prod small{font-size:14px;line-height:1.35;margin-top:3px}
.prod small b{color:var(--deep);font:700 16px var(--text)}
.prod .piel-foto{flex:0 0 84px;width:84px;height:84px;border-radius:18px;object-fit:cover;background:var(--tint2)}
.qty{background:#fff;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--line);padding:3px;gap:2px;flex:0 0 auto}
.qty:has(> :only-child){background:none;box-shadow:none;padding:0}
.qty button,.qty button.add{width:42px;height:42px;border-radius:50%;border:0;background:transparent;color:var(--deep);font:600 22px var(--text);transition:transform .15s var(--spring)}
.qty button.add{background:var(--brand);color:var(--on-brand)}
.qty button:active{transform:scale(.86)}
.qty b{font:700 16px var(--text);min-width:24px}
.cartbar{background:none;padding:10px 14px calc(14px + env(safe-area-inset-bottom));pointer-events:none;animation:pielUp .42s var(--spring) both}
.cartbar .btn{pointer-events:auto;background:var(--deep);border-color:var(--deep);color:#fff;border-radius:20px;min-height:62px;padding:0 22px;font-size:17px;box-shadow:0 18px 40px -10px color-mix(in oklab,var(--deep) 70%,transparent)}
#cartTotal{font:800 21px var(--display);display:inline-block}
#cartTotal.pop{animation:pielPop .32s var(--spring)}
#checkout,#track{margin-top:12px}
.seg{background:var(--tint2);padding:4px;border-radius:16px;gap:4px}
.seg button{border:0;background:transparent;border-radius:12px;font:600 15px var(--text);min-height:46px}
.seg button[aria-pressed=true]{background:#fff;color:var(--deep);box-shadow:var(--lift)}
.seg button:disabled{opacity:.45}
.sum,#totals{background:var(--deep)!important;border-radius:18px!important}
#totals b{font-family:var(--display)}
.track{position:relative}
.track li{padding:12px 0;font-weight:600;position:relative}
.track li .dot{width:20px;height:20px;background:var(--tint2);box-shadow:inset 0 0 0 2px var(--line)}
.track li.on .dot{background:var(--brand);box-shadow:0 0 0 5px color-mix(in oklab,var(--brand) 18%,transparent)}
.track li:not(:last-child)::after{content:"";position:absolute;left:9px;top:34px;bottom:-10px;width:2px;background:var(--line)}
.track li.on:not(:last-child)::after{background:var(--brand)}
.powered{padding:0 0 110px}
header.top,.top{background:var(--deep)!important}
.top .wrap{min-height:58px}
.logo{font-family:var(--display);font-weight:800;letter-spacing:-.02em}
body.piel-login{background:var(--brand)}
body.piel-login header.top{background:transparent!important}
body.piel-login #login{padding-top:6vh!important}
#login .card{padding:28px 24px;border-radius:28px;box-shadow:0 30px 70px -24px rgba(0,0,0,.55)}
#login h1{font-size:38px!important;line-height:.98}
#login input[type=password]{font:700 26px var(--display);letter-spacing:.32em;text-align:center;min-height:64px}
.roletag{background:transparent;color:var(--muted);padding:0;font-weight:600;font-size:14px}
.tabs{gap:4px;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}
.tab{border:0;background:transparent;color:var(--muted);font:600 15px var(--text);border-radius:12px}
.tab[aria-selected=true]{background:var(--deep);color:#fff}
@media (max-width:760px){#panel{padding-bottom:104px!important}#panel .tabs{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:30;background:#fff;border-radius:20px;padding:6px;box-shadow:0 18px 44px -12px color-mix(in oklab,var(--deep) 55%,transparent),0 0 0 1px var(--line)}#panel .tab{flex:1 0 auto;min-height:48px;padding:8px 14px;font-size:14px}}
.ord{border:0;border-radius:16px 16px 0 0;padding:16px 16px 22px;box-shadow:var(--lift);-webkit-mask:radial-gradient(7px at 10px 100%,transparent 98%,#000) -10px 0/20px 100% repeat-x;mask:radial-gradient(7px at 10px 100%,transparent 98%,#000) -10px 0/20px 100% repeat-x}
.ord.nueva{border:0;background:color-mix(in oklab,var(--brand) 9%,#fff);box-shadow:inset 0 5px 0 var(--brand),var(--lift)}
.ord .n{font:800 28px/1 var(--display);letter-spacing:-.03em;color:var(--deep)}
.ord ul{padding-left:0;list-style:none}
.ord li{padding:3px 0;font-weight:500}
.pill{font-weight:700;border-radius:8px;padding:4px 9px}
.pill.w{background:color-mix(in oklab,var(--brand) 14%,#fff);color:var(--deep)}
.mgrid{grid-template-columns:repeat(auto-fill,minmax(146px,1fr));gap:10px}
.mbtn{border:0;box-shadow:var(--lift);border-radius:16px;font:600 15px/1.25 var(--text);min-height:78px;padding:12px;transition:transform .12s ease}
.mbtn:active{transform:scale(.96)}
.mbtn small{color:var(--deep);font-weight:700;margin-top:4px}
.mbtn .q{background:var(--brand);color:var(--on-brand);font-weight:700}
.kds{background:var(--ink);color:#fff;border:0;border-radius:20px;padding:18px}
.kds .n,.kds h2,.kds h3,.kds b,.kds strong{color:#fff}
.kds li{font-size:20px;font-weight:600;border-bottom:1px solid rgba(255,255,255,.14);padding:11px 0}
.kds li.done{opacity:.35}
.kds.late{border:0;box-shadow:0 0 0 3px #FF5A4F}
.stat{background:#fff;color:var(--muted);box-shadow:var(--lift);border-radius:18px}
.stat b{font:800 34px/1.05 var(--display);letter-spacing:-.03em;color:var(--deep)}
.bars div{background:var(--brand)}
.hbar i{background:var(--brand)}
table.tb td,table.tb th{border-color:var(--line)}
dialog{border-radius:26px;box-shadow:0 40px 90px -20px rgba(0,0,0,.5)}
dialog::backdrop{background:color-mix(in oklab,var(--deep) 62%,transparent);backdrop-filter:blur(3px)}
.banner{border-radius:14px}
.hero{background:var(--brand);color:var(--on-brand);padding:40px 0 36px}
.hero h1{color:var(--on-brand);line-height:.96;letter-spacing:-.04em;font-size:clamp(38px,6.4vw,76px)!important}
.hero h1 em{color:inherit}
.hero p{color:var(--on-brand);opacity:.9;display:block!important;font-size:17px}
.giro{border:0;box-shadow:inset 0 0 0 1.5px var(--line);border-radius:14px;font:600 15px var(--text);transition:transform .12s ease}
.giro:active{transform:scale(.97)}
.giro[aria-pressed=true]{background:var(--deep);color:#fff;box-shadow:none}
.grpT{font:600 13px var(--text);letter-spacing:0;text-transform:none;color:var(--muted)}
.sw button{transition:transform .15s var(--spring)}
.sw button[aria-pressed=true]{box-shadow:0 0 0 3px var(--deep);transform:scale(1.08)}
.price b{font:800 38px var(--display);color:var(--deep);letter-spacing:-.03em}
.phone{background:#101014;box-shadow:0 40px 80px -24px color-mix(in oklab,var(--deep) 75%,transparent),0 0 0 1px rgba(255,255,255,.08) inset}
.phone .notch{background:#101014}
.phone iframe{background:#fff}
.enter span{background:#fff;color:var(--deep)}
#dock,#bigBar{background:var(--deep)}
#dock .pr b{font:800 22px var(--display)}
body.big::before{background:var(--deep)}
.pulse{animation:none}
@media (max-width:900px){.hero{padding:28px 0 24px}.hero h1{font-size:clamp(36px,10.5vw,52px)!important}.phone{--pw:168px;border-radius:26px;padding:6px}}
@keyframes pielIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes pielUp{from{transform:translateY(100%)}to{transform:none}}
@keyframes pielPop{50%{transform:scale(1.16)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}