/* Motor de demos Al Toque Digital — todo se controla con variables (tokens) por estilo */
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:90px;overflow-x:clip}
body{font:400 17px/1.55 var(--fb);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;padding-bottom:84px}
img{display:block;max-width:100%;height:auto}a{color:inherit}
:focus-visible{outline:3px solid var(--a);outline-offset:3px}
h1,h2,h3{font-family:var(--fd);font-weight:var(--fw,800);text-transform:var(--tt,none);letter-spacing:var(--ls,-.02em);line-height:1.04}
h1{font-size:var(--h1,clamp(2.8rem,9vw,6rem))}h2{font-size:var(--h2,clamp(2rem,5vw,3.4rem))}h3{font-size:1.3rem}
.wrap{max-width:1200px;margin:0 auto;padding:0 var(--pad,clamp(20px,5vw,64px))}
.eyebrow{font:700 .85rem/1 var(--fb);color:var(--a);margin-bottom:16px;letter-spacing:var(--ey,0);text-transform:var(--eyt,none)}
.sub{font-size:1.1rem;max-width:56ch;opacity:.85;margin-top:14px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 1rem/1 var(--fb);padding:16px 26px;text-decoration:none;cursor:pointer;background:var(--p);color:var(--onp);border:var(--bw,0) solid var(--bd,transparent);border-radius:var(--r,12px);box-shadow:var(--sh,none);transition:transform .2s,filter .2s;text-transform:var(--btt,none);letter-spacing:var(--btl,0)}
.btn:hover{transform:translateY(-3px);filter:brightness(1.08)}
.btn.line{background:transparent;color:var(--hero-ink,var(--ink));border:2px solid currentColor;box-shadow:none}
.btn.wa{background:#25D366;color:#06260F;border-color:var(--bd,transparent)}
.btn.lg{padding:19px 34px;font-size:1.08rem}
/* barra demo + header */
.demo-bar{background:#16120F;color:#fff;text-align:center;font-size:.85rem;padding:8px 14px;font-weight:500}
.demo-bar a{font-weight:800;color:#FFB627}
.top{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:22px;padding:12px var(--pad,clamp(20px,5vw,64px));background:var(--hbg);color:var(--hink);backdrop-filter:blur(12px);border-bottom:var(--hb,0)}
.brand{font:var(--fw,800) 1.25rem var(--fd);text-decoration:none;margin-right:auto;text-transform:var(--tt,none);letter-spacing:var(--ls,-.01em)}
.top nav{display:none;gap:22px}.top nav a{text-decoration:none;font-weight:600;opacity:.8}.top nav a:hover{opacity:1;color:var(--a)}
@media(min-width:860px){.top nav{display:flex}}
.btn.sm{padding:11px 18px;font-size:.92rem}
/* HERO */
.hero{position:relative;overflow:hidden;--hero-ink:var(--ink)}
.hero h1{margin:6px 0 20px}.hero .lead{font-size:clamp(1.05rem,2vw,1.3rem);max-width:46ch;opacity:.92;margin-bottom:28px}
.row{display:flex;flex-wrap:wrap;gap:14px}
.in1,.in2,.in3,.in4{opacity:0;transform:translateY(24px);animation:rise .8s forwards cubic-bezier(.2,.8,.2,1)}
.in1{animation-delay:.05s}.in2{animation-delay:.2s}.in3{animation-delay:.4s}.in4{animation-delay:.55s}
.hero.split{padding:clamp(56px,8vw,110px) 0;background:var(--hero-bg,var(--bg))}
.hero.split .wrap{display:grid;gap:44px;align-items:center}
@media(min-width:900px){.hero.split .wrap{grid-template-columns:1.1fr .9fr}}
.hero.split .pic{position:relative;max-width:460px;width:100%;justify-self:center}
.hero.split .pic:before{content:"";position:absolute;inset:6% -6% -5% 8%;background:var(--s);border-radius:var(--imgr,24px);transform:rotate(5deg);z-index:0}
.hero.split .pic img{position:relative;z-index:1;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--imgr,24px);box-shadow:var(--sh,none)}
.hero.full{min-height:min(88vh,780px);display:flex;align-items:flex-end;color:#fff;--hero-ink:#fff;background:#000}
.hero.full>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:kb 22s ease-in-out infinite alternate}
.hero.full:before{content:"";position:absolute;inset:0;z-index:1;background:var(--ov,linear-gradient(0deg,rgba(0,0,0,.82) 8%,rgba(0,0,0,.25) 65%),linear-gradient(100deg,rgba(0,0,0,.7) 5%,rgba(0,0,0,0) 80%))}
.hero.full .in{position:relative;z-index:2;padding:90px 0 clamp(48px,8vw,90px);max-width:820px}
.hero.poster{padding:clamp(48px,7vw,90px) 0 0;background:var(--hero-bg,var(--bg))}
.hero.poster h1{font-size:var(--hp,clamp(3.2rem,13vw,10rem));line-height:.9;margin-bottom:26px}
.hero.poster .strip{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--gap,10px);margin-top:clamp(36px,6vw,64px)}
.hero.poster .strip img{width:100%;height:clamp(180px,34vw,420px);object-fit:cover;border-radius:var(--r,0);border:var(--bw,0) solid var(--bd,transparent)}
.hero.poster .strip img:first-child{animation:none}
.deco-stripes:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 2px,transparent 2px 16px);pointer-events:none}
.deco-dots:after{content:"";position:absolute;inset:0;background:radial-gradient(var(--s) 2px,transparent 2.5px) 0 0/26px 26px;opacity:.35;pointer-events:none;z-index:0}
.hero .wrap,.hero .in{position:relative;z-index:2}
.tag{display:inline-block;background:var(--a);color:var(--onp);padding:10px 16px;font-weight:800;border-radius:var(--r,0);transform:rotate(-2deg);margin-top:18px}
/* marquee */
.band{background:var(--s);color:var(--onp2,#111);overflow:hidden;white-space:nowrap;border-block:var(--bw,0) solid var(--bd,transparent)}
.band .tr{display:inline-flex;animation:marq 26s linear infinite}
.band span{font:var(--fw,800) clamp(1.4rem,4vw,2.6rem)/1 var(--fd);text-transform:var(--tt,none);padding:14px 26px}
.band span:after{content:"/";margin-left:50px;opacity:.4}
/* secciones */
.sec{padding:clamp(60px,8vw,110px) 0}.alt{background:var(--bg2)}
.head{margin-bottom:clamp(28px,4vw,48px);max-width:760px}
/* constructor de pedido */
.grp{margin-bottom:34px}.grp>h3{font-size:1.1rem;color:var(--a);margin-bottom:10px;text-transform:uppercase;letter-spacing:.08em;font-family:var(--fb);font-weight:800}
.item{display:grid;grid-template-columns:1fr auto;gap:6px 18px;align-items:center;padding:16px 18px;margin-bottom:10px;background:var(--card,var(--bg2));border:var(--bw,0) solid var(--bd,transparent);border-radius:var(--r,12px);box-shadow:var(--sh,none);transition:transform .2s}
.alt .item{background:var(--card2,var(--bg))}
.item:hover{transform:translateY(-2px)}
.item b{font:700 1.1rem var(--fb);display:block}.item small{opacity:.7;display:block;margin-top:2px}
.item .pr{font:var(--fw,800) 1.15rem var(--fd);color:var(--a);white-space:nowrap}
.item .st{display:flex;align-items:center;gap:10px;grid-column:2;justify-self:end}
.st button{width:40px;height:40px;border:2px solid currentColor;background:transparent;color:inherit;border-radius:var(--r,10px);font:700 1.3rem/1 var(--fb);cursor:pointer;transition:.15s}
.st button:hover{background:var(--p);color:var(--onp);border-color:var(--p)}
.st output{min-width:22px;text-align:center;font-weight:800}
.item.on{outline:3px solid var(--p);outline-offset:-3px}
.cols{display:grid;gap:0 30px}@media(min-width:900px){.cols{grid-template-columns:1fr 1fr}.cols .grp{break-inside:avoid}}
/* reserva / datos */
.bk{display:grid;gap:14px;margin-top:10px}@media(min-width:700px){.bk{grid-template-columns:1fr 1fr}}
.bk label{display:grid;gap:6px;font-weight:700;font-size:.9rem}
.bk label.full{grid-column:1/-1}
input,select,textarea{font:500 1.05rem var(--fb);padding:14px;border:2px solid var(--ink);background:var(--bg);color:var(--ink);border-radius:var(--r,10px);min-height:52px;width:100%}
.alt input,.alt select,.alt textarea{background:var(--bg)}
.bad{border-color:#e63946!important}
/* galería, por qué */
.gal{display:grid;gap:var(--gap,16px)}@media(min-width:760px){.gal{grid-template-columns:1.2fr 1fr 1fr}}
.gal img{width:100%;height:100%;min-height:260px;max-height:520px;object-fit:cover;border-radius:var(--r,12px);border:var(--bw,0) solid var(--bd,transparent);box-shadow:var(--sh,none)}
.why{display:grid;gap:18px}@media(min-width:800px){.why{grid-template-columns:repeat(3,1fr)}}
.why div{padding:24px;border:var(--bw,1px) solid var(--bd,rgba(128,128,128,.3));border-radius:var(--r,12px);background:var(--card,transparent);box-shadow:var(--sh,none)}
.why b{font:var(--fw,800) 2.6rem/1 var(--fd);color:var(--a);display:block;margin-bottom:10px}
.why p{opacity:.85;margin-top:6px}
/* info / mapa */
.info{display:grid;gap:34px}@media(min-width:900px){.info{grid-template-columns:1fr 1fr}}
.hrs{list-style:none;padding:0;margin-top:16px;display:grid;gap:8px}.hrs li{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid rgba(128,128,128,.35);padding:8px 0}
.map{height:320px;border:var(--bw,0) solid var(--bd,transparent);border-radius:var(--r,12px);overflow:hidden;background:var(--bg2)}.map iframe{width:100%;height:100%;border:0}
.foot{padding:34px 0 30px;background:var(--hbg);color:var(--hink);font-size:.95rem}.foot a{color:var(--a)}
/* barra de pedido */
.cart{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;align-items:center;gap:14px;padding:12px var(--pad,clamp(20px,5vw,64px));background:var(--hbg);color:var(--hink);box-shadow:0 -10px 30px rgba(0,0,0,.25);transform:translateY(0)}
.cart .sum{margin-right:auto;font-weight:700;line-height:1.2}.cart .sum small{display:block;opacity:.7;font-weight:500}.cart .sum b{font:var(--fw,800) 1.3rem var(--fd);color:var(--a)}
.cart .btn{padding:14px 20px;flex:none;max-width:62%;text-align:center;line-height:1.15}.cart .sum{min-width:0}
.fine{font-size:.82rem;opacity:.65;margin-top:14px}
.rise{opacity:0;transform:translateY(30px);transition:.8s cubic-bezier(.2,.8,.2,1)}.rise.on{opacity:1;transform:none}
@keyframes rise{to{opacity:1;transform:none}}@keyframes kb{to{transform:scale(1.07)}}@keyframes marq{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.in1,.in2,.in3,.in4,.rise{opacity:1!important;transform:none!important}}