/* BILLAR — capa responsive desktop/tablet. Mantiene intacta la experiencia móvil. */
@media (min-width: 768px) {
  body { min-height:100vh; }
  .app { max-width:1180px; padding:96px 24px 120px; }
  .nav { top:18px; bottom:auto; left:50%; right:auto; transform:translateX(-50%); width:min(760px,calc(100vw - 48px)); max-width:none; padding:0; }
  .nav-pill { min-height:58px; padding:6px 10px; border-radius:22px; }
  .nb { height:46px; flex-direction:row; gap:8px; font-size:11px; letter-spacing:.2px; }
  .nb svg { width:18px; height:18px; }
  .barra { max-width:1180px; bottom:24px; padding:0 24px; }
  .barra-inner { justify-content:flex-end; }
  .btn-c { flex:0 0 260px; }
  .hd,.menu-top { position:relative; top:auto; border-radius:20px; margin:0 0 18px; padding:16px 20px; }
  .menu-top { padding-bottom:14px; }
  .car-wrap { margin:0; border-radius:28px; }
  .car-sl { height:360px; }
  .cap { padding:36px 34px 28px; }
  .cap b { font-size:30px; }
  .hero { padding:28px 8px 8px; }
  .hero h1 { font-size:46px; max-width:760px; }
  .hero p { font-size:16px; }
  .promo-wrap { margin:22px 0 0; }
  .promo-sl { height:150px; padding:24px 28px; }
  .sec { margin-top:34px; }
  .sec-h { padding:0; }
  .row { padding:4px 0 10px; }
  .mini-g { margin:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-radius:24px; }
  .mc { min-height:92px; }
  .mc:nth-child(odd) { border-right:1px solid var(--bl); }
  .mc-img { width:92px; height:92px; }
  .prods { padding:16px 0 0; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
  .prod-img { height:160px; }
  .ofl { padding:16px 0 0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
  .ofc { height:220px; }
  .rzs { padding:0; grid-template-columns:repeat(4,minmax(0,1fr)); }
  .info-c { padding:16px 0 0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
  .ic { margin-bottom:0; }
  .vh { padding:4px 0 12px; }
  .vh h2 { font-size:32px; }
  .ft { margin-top:42px; border-radius:28px; padding:34px; }
  .modal { max-width:620px; border-radius:28px; margin-bottom:24px; }
  .ov { align-items:center; padding:24px; }
}

@media (min-width: 1100px) {
  .app { max-width:1380px; padding-left:34px; padding-right:34px; }
  .car-sl { height:430px; }
  .hero h1 { font-size:54px; }
  .prods { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .prod-img { height:178px; }
  .ofl { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .tc { flex-basis:210px; }
  .tc-img { height:145px; }
  .nc { flex-basis:330px; }
  .nc-img { height:175px; }
}

@media (min-width: 1500px) {
  .app { max-width:1500px; }
  .prods { grid-template-columns:repeat(5,minmax(0,1fr)); }
}

/* Navegacion secundaria + bloqueo visual de pull-to-refresh */
html,body{overflow-y:auto!important;-webkit-overflow-scrolling:touch;touch-action:pan-y!important;overscroll-behavior-y:auto!important}
.view-head{display:flex;align-items:center;gap:10px}
.view-head h2{margin:0}
.view-back{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;flex:0 0 40px;background:var(--card);border:1px solid var(--b2);color:var(--t);box-shadow:var(--sh);transition:transform .15s,background .15s}
.view-back:active{transform:scale(.92);background:var(--card2)}
.view-back-overlay{background:rgba(0,0,0,.62);border-color:rgba(255,255,255,.16);color:#fff;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.menu-top .view-head{margin-bottom:10px}
.menu-top .view-head h2{margin-bottom:0}
@media (min-width:900px){.view-back{width:42px;height:42px;flex-basis:42px}}

.car-tr,.promo-tr{touch-action:pan-y!important}.row,.mcats{touch-action:auto!important}