:root{
  --blue:#1f4f9a; --navy:#14305f; --coral:#e5533d; --cream:#f6f1e8; --card:#ffffff;
  --ink:#1c2b44; --muted:#6a7a92; --line:#e6dfd2; --ok:#2e8b57; --r:18px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0}
body{background:#e9e2d4;color:var(--ink);font:16px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
h1,h2,h3{font-family:"Archivo Black","Arial Black",system-ui,sans-serif;letter-spacing:.2px;margin:0}
button{font:inherit;cursor:pointer;border:0;border-radius:999px;padding:12px 20px;background:var(--blue);color:#fff;font-weight:700;touch-action:manipulation}
button.ghost{background:transparent;color:var(--blue);border:2px solid var(--blue)}
button.coral{background:var(--coral)}
button:disabled{opacity:.45;cursor:not-allowed}
input,textarea,select{font:inherit;font-size:16px;color:var(--ink);background:#fff;border:2px solid var(--line);border-radius:12px;padding:12px;width:100%}
input:focus,textarea:focus{outline:none;border-color:var(--blue)}
.hidden{display:none!important}

/* ===== app del cliente: una columna tipo celular, también en pantallas grandes ===== */
.app{max-width:480px;margin:0 auto;background:var(--cream);min-height:100vh;box-shadow:0 0 40px rgba(0,0,0,.12);padding-bottom:110px;position:relative}
.demo-tag{background:var(--coral);color:#fff;text-align:center;font-size:12px;padding:6px 10px;font-weight:600}

.hero{position:relative;height:250px;background:#14305f url(img/barra.jpg) center 40%/cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,22,48,.25) 0%,rgba(10,22,48,.1) 40%,rgba(10,22,48,.78) 100%)}
.hero .tr{position:absolute;z-index:2;top:12px;left:12px;right:12px;display:flex;justify-content:space-between;align-items:center}
.pill{background:rgba(255,255,255,.92);color:var(--navy);border-radius:999px;padding:7px 13px;font-weight:800;font-size:13px;white-space:nowrap;display:inline-flex;gap:6px;align-items:center}
.dot{width:9px;height:9px;border-radius:50%;background:#999;display:inline-block}
.dot.on{background:var(--ok);box-shadow:0 0 0 3px rgba(46,139,87,.25)}
.dot.off{background:var(--coral)}
.mycart{background:var(--coral);color:#fff;position:relative}
.mycart b{background:#fff;color:var(--coral);border-radius:99px;min-width:20px;height:20px;line-height:20px;text-align:center;font-size:12px;padding:0 5px}
.brandrow{position:absolute;z-index:2;left:16px;right:16px;bottom:16px;display:flex;gap:14px;align-items:flex-end;color:#fff}
.brandrow img{width:82px;height:82px;border-radius:50%;border:3px solid #fff;box-shadow:0 6px 18px rgba(0,0,0,.35);background:#e2dbcd}
.brandrow h1{font-size:26px;line-height:1.05;text-shadow:0 2px 8px rgba(0,0,0,.4)}
.brandrow p{margin:4px 0 0;font-size:14px;opacity:.95}

.quick{display:flex;gap:8px;padding:14px 16px 4px;overflow-x:auto;scrollbar-width:none}
.quick::-webkit-scrollbar{display:none}
.quick a{flex:0 0 auto;text-decoration:none;background:#fff;border:1px solid var(--line);color:var(--navy);font-weight:700;font-size:14px;border-radius:999px;padding:9px 14px}

.how{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px 16px 4px}
.how div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 6px;text-align:center;font-size:12.5px;font-weight:700;color:var(--navy);line-height:1.25}
.how i{display:block;font-style:normal;font-size:22px;margin-bottom:2px}

.chips{position:sticky;top:0;z-index:15;background:var(--cream);border-bottom:1px solid var(--line);overflow-x:auto;white-space:nowrap;scrollbar-width:none;margin-top:10px}
.chips::-webkit-scrollbar{display:none}
.chips .in{display:flex;gap:8px;padding:10px 16px}
.chip{background:#fff;color:var(--ink);border:2px solid var(--line);padding:8px 16px;font-size:15px}
.chip.on{background:var(--blue);border-color:var(--blue);color:#fff}

.main{padding:0 16px}
.cat{padding-top:22px;scroll-margin-top:60px}
.cat h2{color:var(--blue);font-size:22px}
.cat .note{color:var(--muted);font-size:14px;margin:2px 0 0}
.banner{height:130px;border-radius:var(--r);background-size:cover;background-position:center;margin-top:12px}
.items{display:grid;gap:10px;margin-top:12px}
.item{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px;display:flex;gap:12px;align-items:center;justify-content:space-between;text-align:left;width:100%;color:var(--ink);font-weight:400;position:relative}
.item:active{transform:scale(.985)}
.item .tx{flex:1;min-width:0}
.item b{font-size:17px;display:block;font-weight:800}
.item span.d{display:block;color:var(--muted);font-size:13.5px;margin-top:2px}
.price{font-weight:800;color:var(--navy);white-space:nowrap;margin-top:4px;font-size:15px}
.price small{color:var(--muted);font-weight:500;font-size:12px}
.plus{flex:0 0 auto;width:42px;height:42px;border-radius:50%;background:var(--coral);color:#fff;font-size:26px;line-height:42px;text-align:center;font-weight:400;position:relative}
.plus em{position:absolute;top:-6px;right:-6px;background:var(--navy);color:#fff;border-radius:99px;min-width:20px;height:20px;line-height:20px;font-size:12px;font-style:normal;font-weight:800;padding:0 5px}
.item.out{opacity:.5}.item.out .plus{background:#aaa}

.gal{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:28px 16px 0}
.gal div{height:130px;border-radius:14px;background-size:cover;background-position:center}
.gal div:first-child{grid-column:1/3;height:170px}
.foot{padding:24px 16px;color:var(--muted);font-size:14px;text-align:center}
.foot a{color:var(--blue);font-weight:700}

/* barra del carrito */
.cartbar{position:fixed;left:0;right:0;bottom:0;z-index:20;padding:14px 14px calc(14px + env(safe-area-inset-bottom));background:linear-gradient(transparent,var(--cream) 35%);pointer-events:none}
.cartbar button{pointer-events:auto;width:100%;max-width:452px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;background:var(--coral);padding:16px 22px;font-size:17px;box-shadow:0 8px 24px rgba(229,83,61,.4)}
.cartbar.bump button{animation:bump .5s}
@keyframes bump{30%{transform:scale(1.04)}60%{transform:scale(.98)}}
.cartbar button span.go{background:#fff;color:var(--coral);border-radius:99px;padding:4px 12px;font-size:14px}

/* hoja inferior */
.scrim{position:fixed;inset:0;background:rgba(10,20,40,.55);z-index:30;display:flex;align-items:flex-end;justify-content:center}
.sheet{background:var(--cream);width:100%;max-width:480px;max-height:94vh;overflow:auto;border-radius:24px 24px 0 0;padding:18px 16px calc(20px + env(safe-area-inset-bottom));animation:up .22s ease-out}
@keyframes up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.sheet h3{font-size:22px;color:var(--navy)}
.sheet .row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.x{background:#fff;color:var(--ink);border:1px solid var(--line);padding:8px 14px}
.grp{margin-top:16px}
.grp > label.t{font-weight:800;display:block;margin-bottom:6px;color:var(--navy)}
.opt{display:flex;justify-content:space-between;align-items:center;background:#fff;border:2px solid var(--line);border-radius:12px;padding:13px 12px;margin-bottom:8px;cursor:pointer}
.opt.on{border-color:var(--blue);background:#eaf1fb}
.opt input{width:auto;margin-right:10px;accent-color:var(--blue);transform:scale(1.2)}
.opt .l{display:flex;align-items:center}
.qty{display:flex;align-items:center;gap:14px}
.qty button{width:40px;height:40px;padding:0;font-size:20px}
.qty b{min-width:22px;text-align:center}
.line{display:flex;justify-content:space-between;gap:10px;padding:12px 0;border-bottom:1px solid var(--line)}
.line small{color:var(--muted);display:block}
.total{display:flex;justify-content:space-between;font-size:20px;font-weight:800;margin:14px 0}
.seg{display:flex;gap:8px}
.seg button{flex:1;background:#fff;color:var(--ink);border:2px solid var(--line)}
.seg button.on{background:var(--blue);color:#fff;border-color:var(--blue)}
.msg{background:#fff;border:1px dashed var(--line);border-radius:12px;padding:10px 12px;color:var(--muted);font-size:14px;margin-top:10px}
.empty{color:var(--muted);text-align:center;padding:18px;border:2px dashed var(--line);border-radius:var(--r)}

/* seguimiento */
.done{text-align:center;padding:24px 0 6px}
.num{font-family:"Archivo Black","Arial Black",sans-serif;font-size:76px;line-height:1;color:var(--coral)}
.steps{display:flex;gap:6px;margin:22px 0 8px}
.step{flex:1;text-align:center;font-size:13px;color:var(--muted)}
.step i{display:block;height:8px;border-radius:99px;background:var(--line);margin-bottom:6px}
.step.on i{background:var(--blue)}
.step.on{color:var(--ink);font-weight:700}
.step.now i{background:var(--coral)}

/* ===== animaciones ===== */
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
@keyframes twinkle{0%,100%{opacity:.15;transform:scale(.6) rotate(0)}50%{opacity:1;transform:scale(1.15) rotate(25deg)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes steam{0%{transform:translateY(8px) scaleX(1);opacity:0}30%{opacity:.7}100%{transform:translateY(-34px) scaleX(1.6);opacity:0}}
@keyframes fall{to{transform:translateY(105vh) rotate(540deg);opacity:.9}}
@keyframes shine{from{background-position:-200% 0}to{background-position:200% 0}}
.hero{animation:fadein .8s ease-out}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.brandrow img{animation:pop .7s .15s cubic-bezier(.2,.9,.3,1.2) both,floaty 5s 1s ease-in-out infinite}
.brandrow h1{animation:rise .6s .35s both}.brandrow p{animation:rise .6s .5s both}
.spark{position:absolute;z-index:2;color:#fff;animation:twinkle 3s ease-in-out infinite;pointer-events:none;text-shadow:0 0 8px rgba(255,255,255,.8)}
.steam{position:absolute;z-index:1;width:6px;height:26px;border-radius:99px;background:rgba(255,255,255,.55);filter:blur(4px);animation:steam 3.4s ease-out infinite;pointer-events:none}
.quick a,.how div{animation:rise .5s both}
.how div:nth-child(2){animation-delay:.1s}.how div:nth-child(3){animation-delay:.2s}
.quick a:nth-child(2){animation-delay:.08s}.quick a:nth-child(3){animation-delay:.16s}
.rv{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease}
.rv.in{opacity:1;transform:none}
.item{transition:transform .15s,box-shadow .2s}
.item:not(.out):active{box-shadow:0 0 0 3px rgba(229,83,61,.25)}
.plus{transition:transform .2s}
.item:active .plus{transform:scale(1.15) rotate(90deg)}
.plus em{animation:pop .3s both}
.chip{transition:background .2s,color .2s,transform .15s}
.chip.on{transform:scale(1.04)}
.banner{position:relative;overflow:hidden}
.banner::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);background-size:200% 100%;animation:shine 4s 1s ease-in-out infinite}
.cartbar:not(.hidden) button{animation:rise .35s both}
.conf{position:fixed;top:-20px;z-index:60;pointer-events:none;font-size:22px;animation:fall 2.6s ease-in forwards}
.done .num{animation:pop .6s both}
.sheet.fresh{animation:up .25s cubic-bezier(.2,.9,.3,1)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}

/* ===== tablets (≥700px): menú más ancho, diálogos centrados, botones grandes ===== */
@media (min-width:700px){
  .app{max-width:860px}
  .hero{height:320px}
  .brandrow img{width:104px;height:104px}
  .brandrow h1{font-size:34px}.brandrow p{font-size:16px}
  .main,.quick,.how,.chips .in{padding-left:28px;padding-right:28px}
  .gal{margin-left:28px;margin-right:28px}.gal div{height:170px}.gal div:first-child{height:230px}
  .how div{font-size:15px;padding:14px 8px}
  .chip{font-size:16px;padding:10px 20px}
  .cat h2{font-size:26px}
  .items{grid-template-columns:1fr 1fr;gap:12px}
  .item{padding:16px}.item b{font-size:18px}.price{font-size:16px}
  .plus{width:48px;height:48px;line-height:48px}
  .banner{height:190px}
  .cartbar button{max-width:640px;padding:20px 28px;font-size:19px}
  .scrim{align-items:center}
  .sheet{max-width:600px;border-radius:24px;max-height:88vh;padding-bottom:24px}
  .opt{padding:16px 14px}.opt input{transform:scale(1.35)}
  .qty button{width:46px;height:46px;font-size:22px}
  .seg button,.x{padding:14px 18px}
  .foot{font-size:15px}
}
/* tablet/escritorio horizontal para páginas de personal */
@media (min-width:700px){
  button{min-height:44px}
}

/* ===== tarjeta de fidelidad ===== */
.hint{color:var(--muted);font-size:12.5px;margin:6px 2px 0}
.loyw{padding:12px 16px 0}
.loy{width:100%;display:flex;align-items:center;gap:12px;text-align:left;background:linear-gradient(120deg,var(--blue),#2c6bc4);color:#fff;border-radius:var(--r);padding:14px 16px;box-shadow:0 6px 18px rgba(31,79,154,.28);animation:rise .5s .25s both}
.loy .lg{font-size:30px}
.loy .lt{flex:1}.loy b{display:block;font-size:16px}.loy small{opacity:.9;font-weight:500;font-size:13px}
.loy .go{background:#fff;color:var(--blue);border-radius:99px;padding:6px 12px;font-size:13px}
.lcard{background:linear-gradient(135deg,#1f4f9a,#14305f);color:#fff;border-radius:20px;padding:16px;box-shadow:0 10px 26px rgba(20,48,95,.35);animation:pop .5s both}
.lcard .lh{display:flex;gap:10px;align-items:center}
.lcard .lh img{border-radius:50%;background:#e2dbcd}
.lcard .lh b{display:block;font-family:"Archivo Black",sans-serif}.lcard .lh small{opacity:.8}
.dots{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:16px 0}
.dots i{aspect-ratio:1;border-radius:50%;border:2px dashed rgba(255,255,255,.45);display:flex;align-items:center;justify-content:center;font-style:normal;font-size:13px;color:rgba(255,255,255,.55)}
.dots i.on{background:#fff;border:2px solid #fff;font-size:24px;animation:pop .4s both}
.lcard .lf{display:flex;justify-content:space-between;font-weight:800;font-size:14px}.lcard .lf span{opacity:.7;font-weight:500}
.win{background:#fff3d6;border:2px solid #f2b52e;color:#6b4a00;border-radius:14px;padding:12px;text-align:center;margin-top:12px}
@media (min-width:700px){.loyw{padding:14px 28px 0}}

.acctbox{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-top:16px}
.acctbox span{flex:1;font-size:14px}
.lnk{background:none;color:var(--blue);padding:6px 8px;text-decoration:underline;font-size:14px;min-height:0}
.chk{display:flex;gap:8px;align-items:flex-start;margin-top:10px;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer}
.chk input{width:auto;margin-top:3px;accent-color:var(--blue);transform:scale(1.25)}

.seg.tres button{padding:12px 6px;font-size:15px}
.proof{background:#e9f9ef;border:2px solid #25d366;border-radius:16px;padding:14px;margin-top:12px;font-size:14.5px}
.proof ol{margin:8px 0 12px;padding-left:20px}.proof li{margin-bottom:8px}
.proof small{display:block;color:var(--muted);margin-top:8px}
.bank{background:#fff;border-radius:10px;padding:8px 10px;margin-top:6px;font-size:14px}
.wabtn{display:block;text-align:center;background:#25d366;color:#fff;font-weight:800;border-radius:999px;padding:15px;text-decoration:none;font-size:16px;box-shadow:0 8px 20px rgba(37,211,102,.35)}

.or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13px;margin:14px 0}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}