/* Optimización móvil: app-like, mismo tema oscuro con acento rojo */
.tabbar, .chips, .sheet-grab, .sheet-foot, .sheet-close, .scrim, .stats { display: none; }
.badge-n { position: absolute; top: 6px; left: calc(50% + 6px); min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--accent); color: #fff; font: 600 10px/17px system-ui; text-align: center; font-style: normal; }
.badge-n[hidden] { display: none; }
body.lock { overflow: hidden; }
html { -webkit-tap-highlight-color: transparent; }

/* Hoja de filtros (tablet y móvil) */
@media (max-width: 900px) {
  .filters { display: block !important; position: fixed !important; inset: auto 0 0 0; top: auto !important; z-index: 70; max-height: 88vh !important; border-radius: 26px 26px 0 0 !important; border-width: 1px 0 0 !important; padding: 8px 20px 0 !important; transform: translateY(105%); transition: transform .3s cubic-bezier(.2,.8,.2,1); overflow-y: auto; overscroll-behavior: contain; background: #0d0e12 !important; box-shadow: 0 -20px 60px rgba(0,0,0,.6); }
  .filters.show { transform: none; }
  .scrim { position: fixed; inset: 0; z-index: 65; background: rgba(0,0,0,.65); backdrop-filter: blur(3px); }
  .scrim:not([hidden]) { display: block; }
  .sheet-grab { display: block; width: 40px; height: 4px; border-radius: 2px; background: #33343c; margin: 6px auto 12px; }
  .sheet-close { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: #fff; font-size: 22px; cursor: pointer; margin-left: 8px; }
  .f-head { position: sticky; top: 0; background: #0d0e12; z-index: 2; padding-bottom: 8px; margin-bottom: 4px !important; }
  .sheet-foot { display: block; position: sticky; bottom: 0; background: linear-gradient(0deg, #0d0e12 70%, transparent); padding: 14px 0 calc(14px + env(safe-area-inset-bottom)); }
  .sheet-foot .btn { width: 100%; margin: 0; padding: 16px; font-size: 16px; }
  .only-mobile { display: inline-block !important; }
}

@media (max-width: 760px) {
  /* Barra de pestañas */
  .tabbar { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; background: rgba(13,14,18,.92); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-top: 1px solid #23242b; padding-bottom: env(safe-area-inset-bottom); }
  .tabbar a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 0 9px; color: #8b8b95; font-size: 11px; letter-spacing: .02em; transition: color .15s; }
  .tabbar a.on { color: var(--accent); font-weight: 600; }
  .tabbar a.on::before { content: ''; position: absolute; top: 0; left: 50%; width: 28px; height: 3px; margin-left: -14px; border-radius: 0 0 3px 3px; background: var(--accent); }
  .tabbar a:active { transform: scale(.94); }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  input, select, textarea { font-size: 16px !important; } /* evita el zoom de iOS */

  /* Header compacto */
  .site-header { top: 0; left: 0; right: 0; }
  .hd-bar { border-radius: 0 0 22px 22px; border-width: 0 0 1px; padding: calc(8px + env(safe-area-inset-top)) 12px 8px; }
  .hd-nav, .hd-right { display: none; }
  .hd-logo { padding: 0 14px 0 6px; flex: 1; min-height: 52px; }
  .hd-name { display: inline; font-size: 12px; }
  .hd-menu { padding: 0; width: 52px; justify-content: center; }
  .hd-menu span { display: none; }
  .mega { margin-top: 8px; border-radius: 20px; max-height: calc(100vh - 100px); overflow: auto; }
  .mega-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .mega-grid > div a { padding: 11px 0; }

  /* Secciones de la landing */
  .cats, .how, .contact { padding-left: 16px; padding-right: 16px; padding-top: 64px; padding-bottom: 24px; }
  .cats h2, .how h2, .contact h2 { font-size: 30px; }
  .cats h2 { margin-bottom: 28px; }
  .how h2 { margin-bottom: 28px; }
  .grid, .steps { gap: 12px; }
  article, .steps li { padding: 22px; border-radius: 18px; }
  article h3 { margin-top: 26px; font-size: 22px; }
  .btn { padding: 14px 26px; min-height: 48px; }
  footer { padding-bottom: 36px; }

  /* Inventario */
  .shop { padding: 92px 16px 24px; }
  .shop-head { margin-bottom: 14px; gap: 10px; }
  .shop-head h1 { font-size: 28px; }
  .tools { width: 100%; overflow-x: auto; scrollbar-width: none; gap: 8px; padding-bottom: 2px; }
  .tools::-webkit-scrollbar { display: none; }
  .tools .btn.small, .sort select { min-height: 44px; white-space: nowrap; }
  .sort { flex-shrink: 0; }
  .chips { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px 18px; padding: 2px 16px; scrollbar-width: none; scroll-snap-type: x proximity; }
  .chips::-webkit-scrollbar { display: none; }
  .chips button { flex: 0 0 auto; scroll-snap-align: start; min-height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); background: #0d0e12; color: #c9c9d0; font: inherit; font-size: 14px; cursor: pointer; transition: all .2s; }
  .chips button.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
  .car-grid { grid-template-columns: 1fr; gap: 14px; }
  .car { border-radius: 20px; }
  .car img { aspect-ratio: 16 / 11; }
  .car .info { padding: 2px 16px 16px; }
  .car .year { display: none; }
  .car h3 { font-size: 20px; }
  .car .spec { margin-bottom: 12px; }
  .stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 4px 0 14px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .stats div { text-align: center; }
  .stats div + div { border-left: 1px solid var(--line); }
  .stats small { display: block; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
  .stats b { font-size: 15px; font-weight: 600; }
  .car .actions .btn { min-height: 46px; display: grid; place-items: center; }
  .heart { width: 40px; height: 40px; }
  .chk { padding: 9px 0; font-size: 15px; }
  .chk input { width: 20px; height: 20px; }
  .seg button { min-height: 40px; padding: 0 16px; font-size: 14px; }
  .toggle { width: 48px; height: 28px; }
  .toggle::after { width: 22px; height: 22px; }
  .toggle.on::after { transform: translateX(20px); }

  /* Detalle como hoja inferior */
  .modal { width: 100vw; max-width: 100vw; margin: auto 0 0; max-height: 94vh; border-radius: 26px 26px 0 0; border-width: 1px 0 0; }
  .m-close { top: 12px; right: 12px; width: 44px; height: 44px; }
  .m-info { padding: 20px 18px 0; }
  .m-info h2 { font-size: 28px; }
  .m-specs { grid-template-columns: 1fr 1fr; }
  .m-cta { position: sticky; bottom: 0; background: linear-gradient(0deg, #0d0e12 75%, transparent); padding: 14px 0 calc(14px + env(safe-area-inset-bottom)); margin: 0 -2px; }
  .m-cta .btn { min-height: 50px; display: grid; place-items: center; }
}

/* Hero de la landing en celular vertical */
@media (max-width: 760px) and (orientation: portrait) {
  .layers img { inset: auto -8vw auto -8vw; width: 116vw; height: 65vw; top: calc(50% - 32vw - 2vh); object-fit: cover; -webkit-mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent); }
  .glow { background: linear-gradient(0deg, rgba(10,10,12,.85), transparent 45%), linear-gradient(180deg, rgba(10,10,12,.7), transparent 30%); }
  .titleblock { left: 16px; right: 16px; top: calc(112px + 3vh); }
  h1 { font-size: clamp(38px, 12vw, 52px); }
  .pricebox, .social, .scrollhint { display: none; }
  .tagline { left: 16px; right: 16px; bottom: calc(168px + env(safe-area-inset-bottom)); font-size: 26px; }
  .discover { left: 16px; bottom: calc(92px + env(safe-area-inset-bottom)); font-size: 15px; }
  .circ { width: 52px; height: 52px; }
  .counter { display: flex; top: auto; height: auto; align-self: auto; right: 16px; bottom: calc(110px + env(safe-area-inset-bottom)); gap: 12px; font-size: 16px; }
  .track-line { width: 56px; }
}
@media (max-width: 760px) and (orientation: portrait) and (max-height: 700px) {
  .tagline { bottom: calc(150px + env(safe-area-inset-bottom)); font-size: 22px; }
}

/* La hoja de filtros ocupa el lugar de la barra de pestañas mientras está abierta */
.tabbar { transition: transform .25s; }
body.lock .tabbar { transform: translateY(105%); }