/* Pineyro Autos — shared product-finish layer.
   Deliberately quiet: depth, timing and tactile feedback without visual noise. */
:root {
  --px-fast: 140ms;
  --px-base: 240ms;
  --px-slow: 520ms;
  --px-ease: cubic-bezier(.22, 1, .36, 1);
  --px-spring: cubic-bezier(.2, .85, .25, 1.18);
  --px-glass: color-mix(in srgb, var(--surface, var(--card, #fff)) 78%, transparent);
  --px-hairline: color-mix(in srgb, var(--text, #17130f) 12%, transparent);
  --px-shadow-1: 0 1px 2px rgba(20, 16, 12, .05), 0 8px 22px rgba(20, 16, 12, .06);
  --px-shadow-2: 0 18px 55px rgba(20, 16, 12, .12), 0 2px 8px rgba(20, 16, 12, .06);
  --px-shadow-3: 0 38px 110px rgba(8, 6, 4, .24);
}

[data-theme="dark"] {
  --px-shadow-1: 0 1px 2px rgba(0, 0, 0, .35), 0 10px 28px rgba(0, 0, 0, .24);
  --px-shadow-2: 0 22px 64px rgba(0, 0, 0, .38), 0 2px 8px rgba(0, 0, 0, .3);
  --px-shadow-3: 0 42px 120px rgba(0, 0, 0, .62);
}

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: px-page-out 150ms ease both; }
::view-transition-new(root) { animation: px-page-in 380ms var(--px-ease) both; }
@keyframes px-page-out { to { opacity: .72; transform: scale(.997); } }
@keyframes px-page-in { from { opacity: 0; transform: translateY(5px); } }

html.px-enhanced { scrollbar-gutter: stable; }
html.px-enhanced body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
html.px-lock, html.px-lock body { overflow: hidden !important; overscroll-behavior: none; }

.px-scroll-progress {
  position: fixed; inset: 0 0 auto; z-index: 3000; height: 2px; pointer-events: none;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--red, #d90429), color-mix(in srgb, var(--red, #d90429) 55%, #fff));
  box-shadow: 0 0 12px color-mix(in srgb, var(--red, #d90429) 35%, transparent);
  transition: transform 80ms linear, opacity var(--px-base) ease;
}
.px-scroll-progress.is-short { opacity: 0; }

.navbar, .pa-admin-nav { isolation: isolate; will-change: background-color, box-shadow; }
.navbar::after, .pa-admin-nav::after {
  content: ""; position: absolute; inset: auto 0 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--px-hairline) 12%, var(--px-hairline) 88%, transparent);
  opacity: 0; transition: opacity var(--px-base) ease;
}
.navbar.scrolled::after, .navbar.solid::after, .pa-admin-nav::after { opacity: 1; }
.navbar.scrolled, .navbar.solid {
  box-shadow: 0 8px 32px color-mix(in srgb, #000 7%, transparent);
  backdrop-filter: blur(22px) saturate(1.35) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.35) !important;
}
.navbar .sc-logo img { transform-origin: left center; transition: transform var(--px-base) var(--px-spring), opacity var(--px-base) ease !important; }
.navbar .sc-logo:active img { transform: scale(.965); opacity: .82; }
.navbar .nav-links a { position: relative; }
.navbar .nav-links a:not(.sc-cta)::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 5px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: 100% 50%; transition: transform var(--px-base) var(--px-ease);
}
.navbar .nav-links a:not(.sc-cta):hover::after,
.navbar .nav-links a.active:not(.sc-cta)::after { transform: scaleX(1); transform-origin: 0 50%; }

button, [role="button"], .btn, .btn-ghost, .ds-btn, .pds-btn,
.hm-button, .pp-btn, .btn-wa, .btn-secondary, .filter-fab, .brand-card, .fchip { touch-action: manipulation; }
button:not(:disabled):active, [role="button"]:active, .btn:active, .btn-ghost:active,
.ds-btn:active, .pds-btn:active, .hm-button:active, .pp-btn:active,
.btn-wa:active, .btn-secondary:active, .brand-card:active, .fchip:active {
  transform: translateY(1px) scale(.982) !important; transition-duration: var(--px-fast) !important;
}
button:disabled, .btn:disabled, [aria-disabled="true"] { cursor: not-allowed !important; opacity: .48 !important; box-shadow: none !important; }
button.px-pressing, a.px-pressing, [role="button"].px-pressing { transform: translateY(1px) scale(.985) !important; }

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea {
  caret-color: var(--red, #d90429);
  transition: border-color var(--px-base) ease, box-shadow var(--px-base) ease, background-color var(--px-base) ease !important;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus, select:focus, textarea:focus {
  outline: none; border-color: color-mix(in srgb, var(--red, #d90429) 68%, var(--border-strong)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--red, #d90429) 13%, transparent), var(--px-shadow-1) !important;
}

.px-media-shell { position: relative; overflow: hidden; }
.px-media-shell::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, color-mix(in srgb, var(--text, #fff) 7%, transparent) 47%, transparent 64%);
  transform: translateX(-115%); opacity: 0;
}
.px-media-shell.px-media-loading::before { opacity: 1; animation: px-sheen 1.25s ease-in-out infinite; }
.px-media-shell > img { transition: opacity var(--px-slow) var(--px-ease), transform var(--px-slow) var(--px-ease) !important; }
.px-media-shell.px-media-loading > img { opacity: 0; }
@keyframes px-sheen { to { transform: translateX(115%); } }

body:has(#resCount) .card {
  border-radius: 20px !important; border-color: var(--px-hairline) !important; box-shadow: var(--px-shadow-1);
  backface-visibility: hidden;
  transition: transform 420ms var(--px-ease), border-color var(--px-base), box-shadow 420ms var(--px-ease) !important;
}
body:has(#resCount) .card-ph { aspect-ratio: 4 / 4.65; }
body:has(#resCount) .card-body { padding: 20px 21px 22px; }
body:has(#resCount) .card:hover { transform: translateY(-5px) !important; box-shadow: var(--px-shadow-2) !important; }
body:has(#resCount) .card:active { transform: translateY(-1px) scale(.994) !important; }
body:has(#resCount) .card-arrow { transition: transform var(--px-base) var(--px-ease), background-color var(--px-base), color var(--px-base), border-color var(--px-base) !important; }
body:has(#resCount) .search-box input, body:has(#resCount) .sort select { border-radius: 12px !important; background-color: color-mix(in srgb, var(--bg-2) 86%, transparent) !important; }
body:has(#resCount) .fchip { min-height: 38px; display: inline-flex; align-items: center; border-color: var(--px-hairline); }
body:has(#resCount) .fchip.on { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 8%, transparent), var(--px-shadow-1); }
body:has(#resCount) .filter-fab {
  min-height: 50px; background: color-mix(in srgb, var(--text) 91%, transparent); color: var(--bg);
  backdrop-filter: blur(18px) saturate(1.25); box-shadow: var(--px-shadow-2); border: 1px solid color-mix(in srgb, var(--bg) 20%, transparent);
}
body:has(#resCount) .filter-fab[data-count]:not([data-count="0"])::after {
  content: attr(data-count); display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px; background: var(--red); color: #fff; font-size: 10px; font-weight: 700;
}

body:has(#mainImg) .stage {
  border-radius: 22px !important; border: 1px solid var(--px-hairline); box-shadow: var(--px-shadow-2); background: var(--bg-2);
}
body:has(#mainImg) .stage::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(0, 0, 0, .04);
}
body:has(#mainImg) .gnav, body:has(#mainImg) .stage-zoom {
  width: 46px; height: 46px; border-radius: 14px !important; background: rgba(16, 14, 12, .58) !important; color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .2) !important; box-shadow: 0 10px 32px rgba(0, 0, 0, .24) !important;
  backdrop-filter: blur(16px) saturate(1.25);
}
body:has(#mainImg) .stage:hover .gnav { opacity: 1; }
body:has(#mainImg) .gnav:hover { background: color-mix(in srgb, var(--red) 86%, #000) !important; transform: translateY(-50%) scale(1.035); }
body:has(#mainImg) .stage-zoom:hover { background: color-mix(in srgb, var(--red) 86%, #000) !important; transform: scale(1.035); }
body:has(#mainImg) .filmstrip { gap: 9px; padding: 3px 2px 9px; scroll-snap-type: x mandatory; scrollbar-width: none; }
body:has(#mainImg) .filmstrip::-webkit-scrollbar { display: none; }
body:has(#mainImg) .thumb {
  scroll-snap-align: center; border-radius: 11px !important; opacity: .56; border: 1px solid var(--px-hairline);
  transition: opacity var(--px-base), transform var(--px-base) var(--px-ease), border-color var(--px-base), box-shadow var(--px-base) !important;
}
body:has(#mainImg) .thumb.active { opacity: 1; border-color: var(--red) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--red) 18%, transparent); }
body:has(#mainImg) .rail .chip, body:has(#mainImg) .trust-item, body:has(#mainImg) .fin,
body:has(#mainImg) .dna, body:has(#mainImg) .acc { border-radius: 15px !important; border-color: var(--px-hairline) !important; }
body:has(#mainImg) .fin, body:has(#mainImg) .dna { box-shadow: var(--px-shadow-1); }
body:has(#mainImg) .btn-wa, body:has(#mainImg) .btn-secondary { min-height: 52px; border-radius: 14px !important; }

.lb.show { animation: px-backdrop-in var(--px-base) ease both; }
.lb.show #lbImg { animation: px-lightbox-in 440ms var(--px-ease) both; box-shadow: var(--px-shadow-3); }
.lb .lb-close, .lb .lb-nav { backdrop-filter: blur(16px); background: rgba(18, 16, 14, .52); }
@keyframes px-backdrop-in { from { opacity: 0; } }
@keyframes px-lightbox-in { from { opacity: 0; transform: scale(.975) translateY(8px); } }

.overlay.open, .ov, .pa-dialog-backdrop {
  animation: px-backdrop-in var(--px-base) ease both; backdrop-filter: blur(12px) saturate(.9) !important;
  -webkit-backdrop-filter: blur(12px) saturate(.9) !important;
}
.overlay.open .modal, .ov .modal, .pa-dialog {
  border: 1px solid var(--px-hairline) !important; box-shadow: var(--px-shadow-3) !important;
  animation: px-modal-in 430ms var(--px-ease) both;
}
.pa-dialog-backdrop.is-leaving { animation: px-backdrop-out 170ms ease both; }
.pa-dialog-backdrop.is-leaving .pa-dialog { animation: px-modal-out 170ms ease both; }
@keyframes px-modal-in { from { opacity: 0; transform: translateY(16px) scale(.975); } }
@keyframes px-modal-out { to { opacity: 0; transform: translateY(8px) scale(.985); } }
@keyframes px-backdrop-out { to { opacity: 0; } }

.toast, .pa-toast, .px-toast { backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); }
.toast.show, .pa-toast.show, .px-toast.show { animation: px-toast-in 380ms var(--px-spring) both; }
.toast.px-success::before, .pa-toast.success::before, .px-toast.success::before { content: "✓"; font-weight: 800; color: #28b56b; margin-right: 8px; }
@keyframes px-toast-in { from { opacity: 0; transform: translate(-50%, 12px) scale(.97); } }

html[data-px-motion="on"] .px-reveal { opacity: 0; transform: translateY(16px); }
html[data-px-motion="on"] .px-reveal.px-visible {
  opacity: 1; transform: none; transition: opacity var(--px-slow) var(--px-ease), transform var(--px-slow) var(--px-ease);
  transition-delay: var(--px-delay, 0ms);
}

.px-toast {
  position: fixed; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); z-index: 3200;
  max-width: min(440px, calc(100vw - 30px)); padding: 13px 18px; border-radius: 999px; transform: translateX(-50%);
  background: color-mix(in srgb, var(--text) 92%, transparent); color: var(--bg);
  border: 1px solid color-mix(in srgb, var(--bg) 14%, transparent); box-shadow: var(--px-shadow-2);
  font: 600 13px var(--font-body, sans-serif); opacity: 0; pointer-events: none;
  transition: opacity var(--px-base), transform var(--px-base) var(--px-ease);
}
.px-toast.show { opacity: 1; }
.px-toast.error { background: #921b2c; color: #fff; }

@media (hover: hover) and (pointer: fine) {
  .hm-car, .hm-need, .hm-guide, .platform-proof a, .eco-pcard, .svc-card, .vehicle-card { transition-timing-function: var(--px-ease) !important; }
}
@media (max-width: 1080px) {
  body:has(#resCount) .filters {
    background: color-mix(in srgb, var(--bg) 94%, transparent) !important; backdrop-filter: blur(24px) saturate(1.25);
    -webkit-backdrop-filter: blur(24px) saturate(1.25); box-shadow: 28px 0 80px rgba(0, 0, 0, .18);
  }
}
@media (max-width: 768px) {
  .px-scroll-progress { height: 1px; }
  .sc-mobile a { transform: translateX(8px); opacity: 0; transition: transform 420ms var(--px-ease), opacity 260ms ease, color var(--px-base) !important; }
  .sc-mobile.open a { transform: none; opacity: 1; }
  .sc-mobile.open a:nth-child(2) { transition-delay: 35ms !important; }
  .sc-mobile.open a:nth-child(3) { transition-delay: 70ms !important; }
  .sc-mobile.open a:nth-child(4) { transition-delay: 105ms !important; }
  .sc-mobile.open a:nth-child(5) { transition-delay: 140ms !important; }
  .sc-mobile.open a:nth-child(6) { transition-delay: 175ms !important; }
  body:has(#resCount) .card { border-radius: 18px !important; }
  body:has(#mainImg) .stage { border-radius: 16px !important; margin-inline: -1px; }
  body:has(#mainImg) .gnav { opacity: .9 !important; width: 42px; height: 42px; }
  body:has(#mainImg) .thumb { flex-basis: 88px; height: 60px; }
  .overlay.open .modal, .ov .modal, .pa-dialog { border-radius: 22px 22px 18px 18px !important; }
  .px-toast { bottom: max(16px, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root), .px-media-shell.px-media-loading::before,
  .overlay.open, .ov, .pa-dialog-backdrop, .overlay.open .modal, .ov .modal, .pa-dialog,
  .lb.show, .lb.show #lbImg, .toast.show, .pa-toast.show, .px-toast.show { animation: none !important; }
  html[data-px-motion="on"] .px-reveal { opacity: 1 !important; transform: none !important; }
  .px-scroll-progress { transition: none; }
}