/* PREMIUM TYPOGRAPHY STACK (loaded via non-blocking link above) */

/* ─── PREMIUM POLISH LAYER (Round 6, 2026-06-06) ─────────────────────
   Adds global micro-interactions, focus styles, smooth scroll, and
   consistent transitions. Sits BEFORE design tokens so component
   styles below can selectively override. Non-destructive. */
html { scroll-behavior: smooth; }
html, body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Premium empty-state bounce (Linear/Notion style) */
@keyframes bounce-stagger {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
  @keyframes bounce-stagger { 0%, 100% { transform: none; } 50% { transform: none; } }
}

/* Stock photo badge (honestidad cuando la foto es fallback)
   Aplica a cards + VDP. Sutil pero visible — Carvana-style. */
.photo-source-badge {
  position: absolute;
  bottom: 8px; right: 8px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(255,255,255,.92);
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 100px;
  z-index: 2;
  letter-spacing: .3px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.photo-source-badge.stock::before { content: ''; font-size: 9px; opacity: .8; }
.photo-source-badge.stock { color: rgba(255,255,255,.78); }

/* ═══════════ SKELETON SCREENS (angel-eye Fix #1) ═══════════
   Reemplazan los "Loading dealers..." / "Loading ranking..." spinners
   con shimmer cards profesionales (estilo Stripe/Linear).
   Implementación 2026-06-06 — angel-eye v1.0 audit recommendation. */
@keyframes ae-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.ae-skel {
  background: linear-gradient(90deg, var(--bg-elevated) 25%, var(--tint-1) 50%, var(--bg-elevated) 75%);
  background-size: 200% 100%;
  animation: ae-shimmer 1.6s ease-in-out infinite;
  border-radius: 8px;
  display: block;
}
.ae-skel-card {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ae-skel-card .ae-skel-img { height: 140px; border-radius: 10px; }
.ae-skel-card .ae-skel-line { height: 12px; }
.ae-skel-card .ae-skel-line.lg { height: 18px; width: 70%; }
.ae-skel-card .ae-skel-line.sm { height: 10px; width: 40%; }
.ae-skel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  padding: 0 20px;
  max-width: 1200px;
  margin: 0 auto;
}
@media (max-width: 640px) {
  .ae-skel-card .ae-skel-img { height: 110px; }
  .ae-skel-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 0 14px; }
}
/* Reduced motion: disable shimmer */
@media (prefers-reduced-motion: reduce) {
  .ae-skel { animation: none; opacity: .6; }
}

/* ═══════════ TRUST BAR (angel-eye Fix #5) ═══════════
   Trust signals visibles en hero — Carvana/CarMax style.
   Avg response time, total cars sold, vendor rating average. */
.trust-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(16px, 4vw, 36px);
  flex-wrap: wrap;
  padding: 14px 20px;
  margin: 20px auto 0;
  max-width: 720px;
  font-size: 13px;
  color: var(--text-secondary);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.trust-bar-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}
.trust-bar-item strong {
  color: var(--text-primary);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.trust-bar-item .trust-icon {
  font-size: 16px;
  filter: saturate(.85);
}
@media (max-width: 480px) {
  .trust-bar { font-size: 11px; gap: 12px; padding: 10px 14px; }
  .trust-bar-item .trust-icon { font-size: 13px; }
}

/* ═══════════ MIN TOUCH TARGETS (angel-eye Fix #4 / A11Y) ═══════════
   Apple HIG / Material Design / Steven Hoober: 44pt iOS / 48dp Android.
   Aplicado globalmente a elementos interactivos mobile. */
@media (max-width: 720px) and (pointer: coarse) {
  .tt-feed-side-btn,
  .topbar-actions .icon-btn,
  .vh-nav-actions button,
  button.theme-toggle,
  .mbn-btn,
  #lang-btn {
    min-width: 44px !important;
    min-height: 44px !important;
  }
}
*, *::before, *::after { box-sizing: border-box; }

/* Focus-visible: keyboard users get a clear ring, mouse users don't.
   2px solid ring + 2px offset (Linear style). */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--primary, #c2410c);
  outline-offset: 2px;
  border-radius: 4px;
  transition: outline-offset var(--dur-fast, 120ms) var(--ease-standard, cubic-bezier(.2,.8,.2,1));
}

/* Button hover lift — universal. Each button class can override. */
button:not(:disabled), a[role="button"]:not(:disabled) { transition: transform var(--dur-fast, 120ms) var(--ease-standard, cubic-bezier(.2,.8,.2,1)), box-shadow var(--dur-fast, 120ms) var(--ease-standard, cubic-bezier(.2,.8,.2,1)); }
button:not(:disabled):hover { transform: translateY(-1px); }
button:not(:disabled):active { transform: translateY(0); }

/* Disabled feedback — fade, no cursor-only change (Linear pattern). */
button:disabled, [aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

/* Selection styling */
::selection { background: rgba(217, 83, 31, 0.18); color: inherit; }

/* DESIGN TOKENS — Premium LIGHT palette (consistent with /marketing and /app) */
:root {
  /* Background layers */
  --bg-deep: #f0ebe1;
  --bg-base: #f7f3ec;
  --bg-elevated: #ffffff;
  --bg-card: #ffffff;
  --bg-hover: #f0ebe1;

  /* Border subtle */
  --border-subtle: rgba(0,0,0,.04);
  --border-default: rgba(0,0,0,.08);
  --border-strong: rgba(0,0,0,.14);

  /* Text */
  --text-primary: #18181b;
  --text-secondary: #52525b;
  --text-tertiary: #71717a;

  /* Premium accents (kept) */
  --gold: #b08d57;
  --gold-soft: rgba(176,141,87,.10);
  --gold-glow: rgba(176,141,87,.22);
  --champagne: #c9a878;

  /* Action colors — burnt copper (kept) */
  --primary: #c2410c;
  --primary-soft: rgba(194,65,12,.07);
  --primary-glow: rgba(194,65,12,.18);
  --primary-deep: #9a3412;

  /* Tints (used to flip hardcoded white rgbas) */
  --tint-1: rgba(0,0,0,.025);
  --tint-2: rgba(0,0,0,.05);
  --tint-3: rgba(0,0,0,.08);

  /* Status */
  --success: #059669;
  --warning: #d97706;
  --danger: #dc2626;

  /* Shadows — softer for light theme */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 14px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.04);
  --shadow-lg: 0 16px 40px rgba(0,0,0,.12), 0 6px 14px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-glow-primary: 0 8px 32px rgba(194,65,12,.18);
  --shadow-glow-gold: 0 8px 32px rgba(176,141,87,.14);

  /* Premium easing */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ─── PREMIUM REDESIGN TOKENS (added 2026-06-06) ───────────────
     Augments — does NOT replace — existing tokens above. Apply
     progressively as components get the polish layer. */

  /* Motion duration ladder (Linear-style) */
  --dur-fast:    120ms;   /* hover, toggle */
  --dur-base:    200ms;   /* button, tab, focus ring */
  --dur-smooth:  320ms;   /* card lift, drawer slide */
  --dur-cinema:  600ms;   /* hero entrance, modal scale */

  /* Easing semantics (in addition to existing) */
  --ease-standard: cubic-bezier(.2, .8, .2, 1);
  --ease-enter:    cubic-bezier(.4, 0, .2, 1);
  --ease-exit:     cubic-bezier(.4, 0, 1, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Shadow ladder — 5 levels (Linear-style) */
  --sh-1: 0 1px 2px rgba(10,10,11,.04);                /* card rest */
  --sh-2: 0 2px 8px rgba(10,10,11,.06);                /* card hover */
  --sh-3: 0 8px 24px rgba(10,10,11,.08);               /* dropdown */
  --sh-4: 0 16px 48px rgba(10,10,11,.12);              /* modal */
  --sh-5: 0 32px 80px rgba(10,10,11,.18);              /* cinema overlay */

  /* Radii + neutral semantic (added 2026-08-16 rediseño unificado) */
  --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px; --r-full: 100px;
  --neutral: #475569;

  /* Radius scale */
  --r-chip:   4px;
  --r-input:  8px;
  --r-card:   12px;
  --r-modal:  16px;
  --r-hero:   24px;
  --r-pill:   9999px;

  /* Spacing scale (4px base) — use for new components */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-12:  48px;
  --sp-16:  64px;
  --sp-24:  96px;
  --sp-32:  128px;

  /* Type scale (Apple steps, editorial display) */
  --type-display-xl-size:  72px;
  --type-display-xl-lh:    76px;
  --type-display-l-size:   56px;
  --type-display-l-lh:     60px;
  --type-h1-size:          40px;
  --type-h1-lh:            44px;
  --type-h2-size:          32px;
  --type-h2-lh:            36px;
  --type-h3-size:          24px;
  --type-h3-lh:            28px;
  --type-h4-size:          20px;
  --type-h4-lh:            24px;
  --type-body-l-size:      17px;
  --type-body-l-lh:        26px;
  --type-body-size:        15px;
  --type-body-lh:          24px;
  --type-caption-size:     13px;
  --type-caption-lh:       18px;
  --type-micro-size:       11px;
  --type-micro-lh:         14px;

  /* Deal-score color ladder (CarGurus-style, refined) */
  --deal-great: #1a8f3c;
  --deal-good:  #65b741;
  --deal-fair:  #f5a623;
  --deal-high:  #ef6b1f;
  --deal-over:  #dc2626;

  /* Glassmorphism preset (sticky nav + photo overlays only) */
  --glass-blur:   blur(20px) saturate(140%);
  --glass-bg:     rgba(255, 255, 255, .72);
  --glass-border: 1px solid rgba(255, 255, 255, .18);

  /* Theme tokens (light is the default :root) */
  color-scheme: light;
}

/* ============== DARK THEME ==============
   Applied via [data-theme="dark"] on <html>. Set by inline FOUC-prevention
   script before paint. Stone palette (warm-neutral) to match cream brand. */
[data-theme="dark"] {
  /* Surfaces — stone palette, warm-neutral, never pure #000 (crushes OLED gradients) */
  --bg-deep:     #0c0a09;   /* stone-950 */
  --bg-base:     #18120f;   /* warm near-black between 950 and 900 */
  --bg-elevated: #1c1917;   /* stone-900 */
  --bg-card:     #1c1917;   /* same as elevated — keeps card edges crisp */
  --bg-hover:    #292524;   /* stone-800 */

  /* Borders — stone scale, visible on dark surfaces */
  --border-subtle:  #292524;   /* stone-800 */
  --border-default: #44403c;   /* stone-700 */
  --border-strong:  #78716c;   /* stone-500 */

  /* Text — cream-inverted, never pure white.
     Tertiary lifted to stone-400 (#a8a29e) in dark mode so WCAG AA passes
     against the dark base (#1c120f). stone-500 was 3.65:1 — below 4.5. */
  --text-primary:   #fafaf9;   /* matches our brand cream */
  --text-secondary: #a8a29e;   /* stone-400 */
  --text-tertiary:  #d6d3d1;   /* stone-300 — was stone-500, failed contrast */

  /* Brand orange — lifted to WCAG-pass on dark (#c2410c is 3.1:1, fails AA) */
  --primary:      #fb923c;       /* orange-400, 7.4:1 on bg-base */
  --primary-soft: rgba(251,146,60,.10);
  --primary-glow: rgba(251,146,60,.25);
  --primary-deep: #c2410c;       /* original burnt copper kept for solid CTAs w/ white text */

  /* Champagne accent — desaturated for dark */
  --gold:        #d4af75;
  --gold-soft:   rgba(212,175,117,.10);
  --gold-glow:   rgba(212,175,117,.20);
  --champagne:   #c9a878;

  /* Tints flip to light overlays on dark */
  --tint-1: rgba(255,255,255,.025);
  --tint-2: rgba(255,255,255,.05);
  --tint-3: rgba(255,255,255,.08);

  /* Status colors stay perceptually similar */
  --success: #10b981;
  --warning: #f59e0b;
  --danger:  #ef4444;

  /* Shadows: in dark, shadows are subtler. Glow takes over for elevation. */
  --shadow-sm:  0 1px 2px rgba(0,0,0,.30);
  --shadow-md:  0 4px 14px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.25);
  --shadow-lg:  0 16px 40px rgba(0,0,0,.45), 0 6px 14px rgba(0,0,0,.30);
  --shadow-glow-primary: 0 8px 32px rgba(249,115,22,.30);
  --shadow-glow-gold:    0 8px 32px rgba(212,175,117,.18);

  color-scheme: dark;
}

/* ============== DARK-MODE OVERRIDES for hardcoded-white inline styles ==============
   The marketplace has hundreds of inline style="background:#fff" / rgba(255,...)
   on cards, nav, footer, modals. Rather than rewrite every inline style, we
   force-override the most visible surfaces here. */
[data-theme="dark"] body { background: var(--bg-base); color: var(--text-primary); }
[data-theme="dark"] img { opacity: .92; }
[data-theme="dark"] img:hover { opacity: 1; }

/* Surfaces (cards / nav / footer / modals / drawers) */
[data-theme="dark"] .car-card,
[data-theme="dark"] .vh-nav,
[data-theme="dark"] .mbn,
[data-theme="dark"] footer,
[data-theme="dark"] .lang-menu,
[data-theme="dark"] [class*="modal"],
[data-theme="dark"] [class*="drawer"],
[data-theme="dark"] .vdp-photos,
/* Removed: .vdp-card — orphan CSS, no element uses this className.
   Dead since at least 2026-06-06 audit (R1 detector). If VDP cards
   are added later with this class, restore here. */
[data-theme="dark"] .calc-modal,
[data-theme="dark"] .toast,
/* Removed: .filter-drawer — orphan. The drawer uses id="filter-drawer"
   (not class), so this rule never matched. R1 audit 2026-06-06. */
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background:#ffffff"],
[data-theme="dark"] [style*="background:white"],
[data-theme="dark"] [style*="background:#fafaf9"],
[data-theme="dark"] [style*="background: #fafaf9"],
[data-theme="dark"] [style*="background:#fafafa"],
[data-theme="dark"] [style*="background:#f5f5f4"],
[data-theme="dark"] [style*="background-color:#fff"],
[data-theme="dark"] [style*="background-color: #fff"] {
  background-color: var(--bg-elevated) !important;
  color: var(--text-primary);
}
/* Auditor-found round 2: hardcoded near-black text in inline styles
   becomes invisible on the (now dark) elevated card surface. Override
   every common variant so calculator modal labels, compare table data
   cells, notify-me modal text, etc. all read in dark mode. */
[data-theme="dark"] [style*="color:#18181b"],
[data-theme="dark"] [style*="color: #18181b"],
[data-theme="dark"] [style*="color:#000"],
[data-theme="dark"] [style*="color:#000000"],
[data-theme="dark"] [style*="color:#27272a"] {
  color: var(--text-primary) !important;
}
[data-theme="dark"] [style*="color:#52525b"],
[data-theme="dark"] [style*="color: #52525b"],
[data-theme="dark"] [style*="color:#71717a"],
[data-theme="dark"] [style*="color: #71717a"] {
  color: var(--text-secondary) !important;
}
/* Calculator modal class-based hardcodes — labels stayed near-black. */
[data-theme="dark"] .calc-label,
[data-theme="dark"] .calc-input,
[data-theme="dark"] .calc-credit,
/* Removed: .calc-result, .calc-total, .calc-row — orphan CSS, no JSX/HTML
   uses these classNames (R1 audit 2026-06-06). The actual calc modal uses
   .calc-modal, .calc-field, .calc-body, .calc-head, .calc-icon, .calc-close
   which ARE all covered by other rules or [class*="modal"] catch-all. */
[data-theme="dark"] .calc-field,
[data-theme="dark"] .calc-body { color: var(--text-primary) !important; }
[data-theme="dark"] .calc-credit option:focus { background: var(--bg-card) !important; color: var(--text-primary) !important; border-color: var(--border-default) !important; }
/* Nav glass effect */
[data-theme="dark"] .vh-nav { background-color: rgba(28,25,23,.85) !important; backdrop-filter: blur(20px); border-bottom: 1px solid var(--border-subtle); }
[data-theme="dark"] .mbn { background-color: rgba(12,10,9,.92) !important; border-top: 1px solid var(--border-subtle); }

/* Borders that were rgba(0,0,0,...) need to flip to light rgba(255,...) */
[data-theme="dark"] [style*="border:1px solid rgba(0,0,0"],
[data-theme="dark"] [style*="border-color:rgba(0,0,0"] { border-color: var(--border-default) !important; }

/* Text on hardcoded white-card bg */
[data-theme="dark"] .car-card *:not(.cond-badge):not([class*="badge"]),
[data-theme="dark"] footer * { color: inherit; }
[data-theme="dark"] footer { color: var(--text-secondary) !important; }

/* Hero gradient (was cream-to-orange, becomes dark + orange glow corner) */
[data-theme="dark"] .hero { background: radial-gradient(ellipse at top right, rgba(251,146,60,.10), transparent 60%); }

/* Form inputs */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background-color: var(--bg-deep) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-default) !important;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: var(--text-tertiary); }
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 3px var(--primary-soft); }
/* Chrome autofill yellow stomp */
[data-theme="dark"] input:-webkit-autofill { -webkit-box-shadow: 0 0 0 30px var(--bg-deep) inset !important; -webkit-text-fill-color: var(--text-primary) !important; }

/* Buttons that were transparent-on-white now read on dark */
[data-theme="dark"] button[style*="background:transparent"],
[data-theme="dark"] button[style*="background: transparent"] { color: var(--text-secondary); }
[data-theme="dark"] button[style*="background:transparent"]:hover { color: var(--text-primary); background-color: var(--tint-2) !important; }

/* Hero AI search bar: was reading "black box" on top of warm-dark body. Make
   it transparent with subtle elevation border so it blends like glass. */
[data-theme="dark"] form[onsubmit*="aiSearch"] {
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.10) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 16px 40px rgba(0,0,0,.35) !important;
}
[data-theme="dark"] form[onsubmit*="aiSearch"]:focus-within {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 5px rgba(251,146,60,.15), 0 20px 50px rgba(0,0,0,.45) !important;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
  background: var(--bg-base);
  color: var(--text-primary);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11", "salt";
  letter-spacing: -0.011em;
  min-height: 100vh;
  /* Subtle ambient gradient en background */
  background-image:
    radial-gradient(ellipse 1200px 600px at 50% -200px, rgba(194,65,12,.06), transparent 60%),
    radial-gradient(ellipse 800px 400px at 100% 100%, rgba(212,175,55,.04), transparent 60%);
}
button { font-family: inherit; cursor: pointer; }
a { color: var(--primary); text-decoration: none; transition: color .2s var(--ease-out); }
a:hover { color: var(--primary-deep); }
img { max-width: 100%; display: block; }

/* PREMIUM HEADINGS — Playfair Display para hero, Manrope para todo lo demás */
h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.05;
}
h2, h3 { font-family: 'Manrope', sans-serif; font-weight: 700; letter-spacing: -0.02em; }

/* DEMO TAB BAR (only for navigation through the demo) */
.demo-bar {
  position: sticky; top: 0; z-index: 100;
  background: rgba(10,10,10,.95); backdrop-filter: blur(12px);
  border-bottom: 1px solid #1A1A1A;
  padding: 10px 14px;
}
.demo-bar-inner {
  max-width: 1280px; margin: 0 auto;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.demo-label {
  font-size: 9px; letter-spacing: 2px; color: var(--text-tertiary); font-weight: 700;
  background: rgba(194,65,12,.08); padding: 4px 8px; border-radius: 100px;
}
.tabs { display: flex; gap: 4px; overflow-x: auto; flex: 1; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  background: transparent; border: 1px solid transparent; color: var(--text-tertiary);
  padding: 6px 12px; border-radius: 100px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
.tab.active { background: rgba(194,65,12,.12); color: #c2410c; border-color: rgba(194,65,12,.3); }
.back-link {
  font-size: 11px; color: var(--text-tertiary);
  padding: 6px 10px; border: 1px solid #2D2D2D; border-radius: 100px;
}

/* Section visibility */
.section { display: none; }
.section.active { display: block; }

/* PREMIUM BUTTONS — Apple/Linear style */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(180deg, #ff6a3d 0%, var(--primary) 50%, var(--primary-deep) 100%);
  color: #fff;
  padding: 14px 26px;
  border-radius: 100px;
  font-family: inherit;
  font-size: 14px; font-weight: 600; letter-spacing: -0.005em;
  border: none;
  cursor: pointer;
  position: relative;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.2),
    0 6px 16px rgba(194,65,12,.32),
    0 1px 3px rgba(0,0,0,.4);
  transition: all .25s var(--ease-out);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.2),
    0 10px 24px rgba(194,65,12,.42),
    0 2px 5px rgba(0,0,0,.5);
}
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--tint-1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--text-primary);
  padding: 14px 24px;
  border-radius: 100px;
  font-family: inherit;
  font-size: 14px; font-weight: 600; letter-spacing: -0.005em;
  border: 1px solid var(--border-default);
  cursor: pointer;
  transition: all .25s var(--ease-out);
}
.btn-ghost:hover {
  background: var(--tint-2);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}


/* ============== STEP 1: AUTTIV.COM HOME ============== */
.vh-page { min-height: 100vh; }

/* AI chat typing-indicator dot animation */
@keyframes auttiv-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

/* Battle Leads — cinematic winner reveal */
@keyframes auttiv-winner-zoom {
  0%   { opacity: 0; transform: scale(.85) translateY(20px); filter: blur(8px); }
  60%  { opacity: 1; transform: scale(1.04) translateY(-2px); filter: blur(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}
@keyframes auttiv-battle-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,.4); }
  50%      { box-shadow: 0 0 0 18px rgba(239,68,68,0); }
}
/* Pulse ring on the battle-pulse dots gets more aggressive.
   Split into longhand so per-dot animation-delay (set on .battle-pulse-2/3/4)
   is preserved — using shorthand !important would wipe out the stagger. */
.battle-pulse {
  animation-name: auttiv-battle-pulse;
  animation-duration: 1.1s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
}
#battle-elapsed { font-variant-numeric: tabular-nums; transition: color .3s; font-weight: 800; }

/* ───────── TikTok feed (dynamic, swipe-up vertical scroll) ───────── */
.tt-feed {
  /* Account for BOTH top nav (~60px) AND mobile bottom nav (~72px + safe area).
     Use dvh (dynamic viewport height) instead of vh so iOS Safari's shrinking
     URL bar doesn't push content under the bottom nav. */
  height: calc(100dvh - 60px - 72px - env(safe-area-inset-bottom, 0px));
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  background: #0c0a09;
  scrollbar-width: none;
}
@supports not (height: 100dvh) {
  .tt-feed { height: calc(100vh - 132px); }
}
.tt-feed::-webkit-scrollbar { display: none; }
.tt-feed-card {
  position: relative;
  height: calc(100dvh - 60px - 72px - env(safe-area-inset-bottom, 0px));
  scroll-snap-align: start;
  scroll-snap-stop: always;
  background: #18120f;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
@supports not (height: 100dvh) {
  .tt-feed-card { height: calc(100vh - 132px); }
}
.tt-feed-photo {
  position: absolute; inset: 0;
  /* `contain` = NO zoom + NO crop — la foto del dealer entera se ve.
     Ahora que .tt-feed-card descuenta top + bottom nav, la info ya no
     queda tapada, así que podemos volver a contain sin perder espacio.
     Letterbox top/bottom queda en #0A0A0A que se funde con el gradiente. */
  background-size: contain;
  background-position: center 30%;   /* foto arriba, info bloque abajo */
  background-repeat: no-repeat;
  background-color: #0c0a09;
}
@media (min-width: 768px) {
  /* Desktop tiene altura sobrada — cover con bias hacia la mitad inferior
     de la foto (donde típicamente está el carro) se ve más cinematic. */
  .tt-feed-photo { background-size: cover; background-position: center 65%; }
}
.tt-feed-photo::after {
  content: '';
  position: absolute; inset: 0;
  /* Stronger gradient so the price + name + CTA always read on any photo.
     Was: transparent 30% → black 90% (info area was barely shaded).
     Now: transparent 20% → semi 50% → black 95% (smoother + denser). */
  background: linear-gradient(180deg, rgba(0,0,0,0) 20%, rgba(0,0,0,0.45) 50%, rgba(0,0,0,0.92) 95%);
}
.tt-feed-top {
  position: absolute; top: 0; left: 0; right: 0;
  padding: 14px 16px;
  display: flex; gap: 8px; align-items: center;
  z-index: 3;
}
.tt-feed-top-pill {
  background: rgba(0,0,0,.55); backdrop-filter: blur(10px);
  color: #fff; padding: 6px 12px; border-radius: 100px;
  font-size: 12px; font-weight: 700; letter-spacing: .3px;
  display: inline-flex; align-items: center; gap: 6px;
}
.tt-feed-side {
  position: absolute; right: 12px; bottom: 220px;
  display: flex; flex-direction: column; gap: 16px;
  z-index: 3;
}
@media (max-height: 700px) {
  .tt-feed-side { bottom: 190px; gap: 12px; }
  .tt-feed-side-btn { width: 42px; height: 42px; font-size: 19px; }
}
.tt-feed-side-btn {
  background: rgba(0,0,0,.45); backdrop-filter: blur(10px);
  border: 0; width: 48px; height: 48px; border-radius: 50%;
  color: #fff; font-size: 22px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s, background .15s;
}
.tt-feed-side-btn:active { transform: scale(.92); background: rgba(255,255,255,.18); }
.tt-feed-side-lbl {
  color: #fff; font-size: 10px; font-weight: 700; text-align: center; margin-top: 2px;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
.tt-feed-bottom {
  position: relative; z-index: 3;
  padding: 16px 80px 24px 18px; color: #fff;
}
.tt-feed-hook { font-size: 13px; font-weight: 600; opacity: .9; margin-bottom: 6px; }
.tt-feed-name { font-family: 'Playfair Display', serif; font-size: 26px; font-weight: 700; letter-spacing: -.5px; line-height: 1.05; margin-bottom: 6px; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.tt-feed-price { font-size: 32px; font-weight: 800; color: #d4af75; letter-spacing: -1px; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.tt-feed-meta { font-size: 12px; color: #d4d4d8; margin-bottom: 14px; }
.tt-feed-want {
  background: linear-gradient(180deg, #d9531f, #9a3412);
  color: #fff; border: 0; width: 100%; padding: 14px;
  border-radius: 14px; font-size: 14px; font-weight: 800; letter-spacing: .5px;
  cursor: pointer; box-shadow: 0 8px 28px rgba(217,83,31,.45);
  font-family: inherit; text-transform: uppercase;
  transition: transform .15s;
}
.tt-feed-want:active { transform: scale(.97); }
.tt-feed-hint {
  position: absolute; left: 50%; bottom: 10px;
  transform: translateX(-50%);
  color: rgba(255,255,255,.5); font-size: 10px; font-weight: 700;
  letter-spacing: 2px; animation: tt-bounce 1.8s ease-in-out infinite;
  z-index: 3;
}
@keyframes tt-bounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-6px); } }
.tt-skeleton { display: flex; flex-direction: column; }
.tt-skel-card { height: calc(100dvh - 60px - 72px - env(safe-area-inset-bottom, 0px)); background: linear-gradient(180deg, #1c1917, #0c0a09); }
@supports not (height: 100dvh) { .tt-skel-card { height: calc(100vh - 132px); } }

/* ───────── Mobile sticky bottom nav (.mbn) — hidden on desktop ───────── */
.mbn { display: none; }
@media (max-width: 720px) {
  .mbn {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Home · Marketplace · Garage (Trade-in salió: ahora vive en el carro) */
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: rgba(255,255,255,.96);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid var(--border-default);
    z-index: 220;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -8px 28px rgba(0,0,0,.06);
  }
  .mbn-btn {
    background: transparent; border: 0; padding: 8px 4px; border-radius: 12px;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    font-family: inherit; cursor: pointer; color: var(--text-secondary);
    min-height: 56px; /* iOS thumb target */
    transition: background .12s, color .12s;
  }
  .mbn-btn.active { color: var(--primary); background: var(--primary-soft); }
  .mbn-btn:active { background: rgba(0,0,0,.04); }
  .mbn-ico { font-size: 20px; line-height: 1; }
  .mbn-lbl {
    font-size: 10px; font-weight: 700; letter-spacing: .3px;
    /* Truncate gracefully if 5-button row is too narrow for a long label */
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Reserve space at bottom so content isn't hidden under the nav */
  body { padding-bottom: 76px; }
  /* Mobile top nav — radical simplification. Bottom nav (.mbn) carries
     all primary navigation (Home/Marketplace/Reels/Trade-in/Garage).
     Top nav on phones only shows: logo · 🌙 theme · EN ▼ lang · For Dealers
     pill. Everything else (Browse pill, My Console link, calc, sync,
     leaderboard, creators) is hidden — they were either redundant with
     bottom nav or pushed 'For Dealers' off-screen (overflow bug Ángel
     showed via iPhone screenshot 2026-06-06). */
  .vh-nav-actions a[data-i18n="nav.browse"],
  .vh-nav-actions a[data-i18n="nav.feed"],
  .vh-nav-actions a[data-i18n="nav.tradein"],
  .vh-nav-actions a[data-i18n="nav.garage"],
  .vh-nav-actions a[data-i18n="nav.leaderboard"],
  .vh-nav-actions a[data-i18n="nav.creators"],
  .vh-nav-actions a[data-i18n="nav.sync"],
  .vh-nav-actions #nav-calc-btn,
  .vh-nav-actions #theme-toggle-btn,
  .vh-nav-actions #saved-counter-link { display: none !important; }
  /* "← Mi panel" es SOLO para suscritos (Ángel 2026-07-02: "no debe salir
     si no está suscrito; una vez se suscriba se quita el Para Vendedores y
     queda el panel"). Con sesión pero sin plan pago se sigue viendo el CTA
     de adquisición. Gatillo: data-paid-seller="1" (fetch de profiles). */
  body[data-paid-seller="1"] .vh-nav-actions a[data-i18n="nav.forSellers"] { display: none !important; }
  body[data-paid-seller="1"] #back-to-seller { display: inline-flex !important; padding: 8px 12px !important; font-size: 11px !important; flex-shrink: 0 !important; }
  /* Logo + brand mark — slightly tighter on phones so 'For Dealers' fits */
  .vh-nav .brand-name { font-size: 17px !important; }
  .vh-nav .brand-mark { width: 32px !important; height: 32px !important; font-size: 16px !important; }
  /* Make the top nav single-row, no wrapping, no horizontal overflow */
  .vh-nav { padding: 10px 12px !important; gap: 6px !important; }
  .vh-nav-actions { gap: 4px !important; flex-wrap: nowrap !important; margin-left: auto !important; }
  /* For Dealers CTA — keep visible but cap padding so it always fits */
  .vh-nav-actions a[data-i18n="nav.forSellers"],
  .vh-nav-actions a[href="/marketing"] { padding: 8px 12px !important; font-size: 11px !important; flex-shrink: 0 !important; }
  /* Hard guard against any rogue element forcing horizontal scroll on mobile */
  html, body { overflow-x: hidden !important; max-width: 100vw; }
}
/* Very small phones (≤400px): drop the "Auttiv" wordmark (the "A" mark stays and
   still links home) + tighten the CTA so "For Sellers →" never clips the edge. */
@media (max-width: 400px) {
  .vh-nav .brand-name { display: none !important; }
  .vh-nav { padding: 10px 10px !important; }
  .vh-nav-actions a[data-i18n="nav.forSellers"],
  .vh-nav-actions a[href="/marketing"] { padding: 7px 10px !important; font-size: 10.5px !important; }
}

/* Paid sellers (profiles.plan_status === 'active') never see acquisition
   CTA on ANY viewport. Set by inline script after fetching plan_status
   from profiles. Anon, trialing, free, past_due, canceled all still
   see "For Sellers →" so they can subscribe or reactivate. */
body[data-paid-seller="1"] .vh-nav-actions a[data-i18n="nav.forSellers"] { display: none !important; }

/* MOBILE FIRST — explicit overrides for narrow phones */
/* ===== RESPONSIVE: MOBILE first (≤640px) ===== */
@media (max-width: 640px) {
  body { font-size: 14px; }
  .hero { padding: 36px 16px 28px; }
  .hero h1 { font-size: clamp(32px, 9vw, 44px) !important; line-height: 1.05 !important; letter-spacing: -.025em !important; margin-bottom: 12px !important; }
  .hero p { font-size: 14px !important; line-height: 1.5 !important; padding: 0 12px; margin-bottom: 22px !important; }
  .vh-nav { padding: 12px 14px !important; }
  .vh-nav-actions { gap: 2px; }
  /* Touch targets: every interactive element ≥44px tall per WCAG 2.5.5 + Apple HIG */
  .vh-nav-actions a { font-size: 11px; padding: 12px 12px; min-height: 44px; display: inline-flex !important; align-items: center; }
  .vh-nav-actions a[href="/marketing"] { padding: 12px 16px !important; font-size: 11px !important; min-height: 44px; }
  #lang-btn { padding: 10px 12px !important; font-size: 11px !important; min-height: 44px; }
  #ai-search { font-size: 16px !important; /* prevent iOS zoom on focus */ padding: 14px 0 !important; min-height: 44px; }
  /* AI suggestion chips - bigger tap target */
  .ai-chip { padding: 12px 16px !important; font-size: 13px !important; min-height: 44px; display: inline-flex !important; align-items: center; }
  /* Generic small buttons inside nav/header — ensure tappable */
  header button, nav button { min-height: 40px; }
  /* Search-by-dealer link was 19px tall, way under threshold */
  button[onclick*="city-search"], a[onclick*="city-search"] { padding: 10px 8px !important; min-height: 44px; display: inline-flex !important; align-items: center; }
  .hero form { padding: 6px 6px 6px 18px !important; }
  .hero form button[type=submit] { width: 44px !important; height: 44px !important; font-size: 18px !important; }
  /* 2 cards per row on phones. Force on EVERY grid that uses .cars-grid
     including #home-live-grid, #city-cars-grid, #recently-viewed-grid.
     The !important + ID selector together survive any inline style or
     later override. */
  .cars-grid,
  #home-live-grid.cars-grid,
  #city-cars-grid.cars-grid { grid-template-columns: repeat(2, 1fr) !important; padding: 0 14px !important; gap: 10px !important; }
  /* Card photos: lock aspect ratio so the 2-col layout looks symmetric */
  .cars-grid .car-card .car-photo { aspect-ratio: 4 / 3 !important; min-height: 0 !important; }
  .car-card .car-title { font-size: 13px !important; }
  .car-card .car-trim { font-size: 11px !important; }
  .car-card .car-price { font-size: 15px !important; }
  .car-card .car-info { padding: 10px 11px !important; }
  /* Home-card enrichment stays legible + tappable in the 2-col phone grid */
  .car-card .car-loc { font-size: 11px !important; margin-top: 4px !important; }
  .car-card .car-monthly { font-size: 11.5px !important; margin-top: 2px !important; }
  .car-card .car-deal-row .deal-badge { font-size: 10px !important; padding: 3px 7px !important; }
  .car-card .car-cta { margin-top: 10px !important; padding: 11px 8px !important; font-size: 12px !important; min-height: 44px !important; }
  .car-badge { font-size: 9px !important; padding: 4px 8px !important; top: 8px !important; left: 8px !important; }
  .vdp-main { padding: 0 14px; }
  .section-h2, h2 { font-size: 24px !important; }
  .feature-strip-inner, .feature-row { grid-template-columns: 1fr !important; gap: 24px !important; }
  /* City tab — condition tabs + body chips + count/sort row */
  .condition-tabs { padding: 0 14px !important; flex-wrap: wrap; gap: 4px !important; }
  .cond-tab { font-size: 12px !important; padding: 9px 14px !important; flex: 1; min-width: 0; }
  #live-inventory-section { padding: 0 14px !important; }
  /* Body chips: scrollable strip */
  #live-inventory-section > div:first-child {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    margin: 0 -14px 12px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    border-bottom: 0 !important;
  }
  .bs-chip { flex-shrink: 0; font-size: 12px !important; padding: 8px 13px !important; }
  /* Sort + Filter row stacks on tiny screens */
  #live-inventory-section > div:nth-child(2) { flex-direction: column; align-items: stretch !important; gap: 8px !important; }
  #live-inventory-section > div:nth-child(2) > div:last-child { justify-content: flex-end; }
  /* VDP mobile polish — Round 3 cinema look preserved on phone */
  #vdp-main-photo, .vdp-photos {
    /* Use aspect-ratio (16/9 from desktop) instead of forced 240px height.
       At 360px wide phones the photo becomes ~200px tall — still legible
       and matches Tesla/Lucid mobile pattern. Avoid letterbox distortion. */
    height: auto !important;
    min-height: 0 !important;
    border-radius: var(--r-card, 12px) !important;
    box-shadow: var(--sh-2, 0 2px 8px rgba(10,10,11,.06)) !important;
  }
  #vdp-thumbs, .vdp-thumbs { gap: 6px !important; padding-bottom: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; }
  #vdp-thumbs .vdp-thumb, .vdp-thumbs .vdp-thumb { flex: 0 0 56px; height: 38px; scroll-snap-align: start; }
  .vdp-title-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .vdp-name { font-size: 22px !important; line-height: 1.2; }
  .vdp-price { font-size: 26px !important; }
  .vdp-meta-row { gap: 8px !important; flex-wrap: wrap; }
  .vdp-meta-row span { font-size: 12px !important; }
  .vdp-features ul { grid-template-columns: 1fr !important; }
  .lead-form-box { padding: 18px 16px !important; }
  .cta-large { width: 100%; padding: 14px !important; font-size: 15px !important; }
  .lead-form-box input { font-size: 16px !important; /* prevent iOS zoom */ }
  /* Recently-viewed: peek next card */
  #recently-viewed-grid { padding: 0 14px 6px !important; margin: 0 -14px !important; }
  #recently-viewed-grid .car-card { flex: 0 0 220px !important; }
  /* Sticky bottom CTA never covered by PWA install */
  #vdp-sticky-cta { padding: 10px 12px !important; }
  #vdp-sticky-name { font-size: 12px !important; }
  #vdp-sticky-price { font-size: 14px !important; }
  #vdp-sticky-btn { padding: 11px 14px !important; font-size: 12px !important; }
  /* Lightbox: kill the side arrows that fall off-screen, show full-bleed */
  #auttiv-lightbox { padding: 12px !important; }
  #lb-prev { left: 6px !important; }
  #lb-next { right: 6px !important; }
  #lb-prev, #lb-next { width: 38px !important; height: 38px !important; font-size: 22px !important; }
  #lb-thumbs { max-width: 100vw !important; padding: 0 8px !important; }
  /* Filter drawer: full-bleed on phone */
  #filter-drawer aside { width: 100% !important; max-width: 100% !important; }
  /* Compare bar on mobile: stack chips */
  #compare-bar { flex-wrap: wrap; gap: 6px !important; padding: 10px 14px !important; }
  /* Compare overlay: table cells scrollable */
  #compare-overlay > div { padding: 0 !important; max-width: 100vw !important; border-radius: 12px !important; }
  #compare-overlay table { font-size: 12px; }
  #compare-overlay table th, #compare-overlay table td { padding: 8px 10px !important; }
  /* Trade-in chip rows */
  .ti-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  /* Dealer-view modal on mobile: compact top bar, tighter padding */
  #dealer-overlay > div:first-child { padding: 8px 10px !important; gap: 8px !important; }
  #dealer-overlay a[target="_blank"] { padding: 7px 10px !important; font-size: 11px !important; }
  #dealer-overlay #dealer-close { width: 32px !important; height: 32px !important; font-size: 14px !important; }
  #dealer-overlay div[style*="font-family"] { font-size: 13px !important; }
  /* Compare bar wraps cleaner */
  #compare-bar { padding: 10px 12px !important; }
  #compare-bar > span { font-size: 11px !important; padding: 4px 8px !important; }
  /* Filter drawer footer buttons in 2 rows if needed */
  #filter-drawer aside > div[style*="position:fixed"] { padding: 12px !important; }
  /* PWA install banner doesn't cover the VDP sticky CTA */
  #vdp-sticky-cta { bottom: 0 !important; }
  /* Trade-in form inputs respond */
  section[data-tab="tradein"] input { font-size: 16px !important; }
  section[data-tab="tradein"] .ti-page { padding: 18px 14px !important; }
  section[data-tab="tradein"] .ti-h { font-size: 20px !important; line-height: 1.2; }
}

/* ===== ULTRA-NARROW (<380px) — fallback to single column ===== */
@media (max-width: 380px) {
  .cars-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .car-card .car-title { font-size: 14px !important; }
  .car-card .car-price { font-size: 16px !important; }
  /* Bottom nav 5 buttons get tight at 320px — shrink label + icon a touch */
  .mbn-btn { padding: 8px 2px !important; }
  .mbn-ico { font-size: 18px !important; }
  .mbn-lbl { font-size: 9px !important; letter-spacing: 0 !important; }
  /* VDP — keep cinema ratio but cap height so chrome doesn't push fold */
  #vdp-main-photo, .vdp-photos { max-height: 56vw !important; }
  /* VDP thumbs slightly smaller to fit 5+ in viewport */
  #vdp-thumbs .vdp-thumb, .vdp-thumbs .vdp-thumb { flex: 0 0 48px !important; height: 32px !important; }
  /* Hero stays readable — slightly tighter line-height */
  .hero h1 { letter-spacing: -0.03em !important; }
}

/* ===== RESPONSIVE: TABLET (641-1023) — 2-col grid ===== */
@media (min-width: 641px) and (max-width: 1023px) {
  .cars-grid { grid-template-columns: repeat(2, 1fr) !important; padding: 0 24px !important; gap: 20px; max-width: 900px; margin: 0 auto; }
  .hero { padding: 48px 24px 34px; }
  .hero h1 { font-size: clamp(42px, 6vw, 62px) !important; }
  .vdp-main { padding: 0 24px; max-width: 760px; margin: 0 auto; }
  #live-inventory-section, #recently-viewed-section { padding: 0 24px !important; max-width: 920px; margin-left: auto; margin-right: auto; }
}

/* RESPONSIVE — en PC, los containers usan max-width útil para legibilidad.
   APPLE-STYLE 2026-05-27: amped hero typography (120px desktop), more whitespace
   per section, refined card shadows. Backup saved as customer-view.backup-v1.html. */
@media (min-width: 1024px) {
  body { background: var(--bg-base); }
  /* Hero y secciones grandes con max-width centrado en PC */
  .hero { padding: 60px 40px 40px; }
  .hero h1 { font-size: clamp(50px, 5.2vw, 74px) !important; line-height: 1.0 !important; letter-spacing: -0.03em !important; }
  .cities, .city-hero, .dealer-hero { max-width: 1240px; margin: 0 auto; padding-left: 40px; padding-right: 40px; }
  .dealers-list, .cars-grid, .vdp-main { max-width: 1240px; margin: 0 auto; padding-left: 40px; padding-right: 40px; }
  .cars-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
  /* Live inventory + recently viewed get same container */
  #live-inventory-section, #recently-viewed-section { max-width: 1240px !important; padding-left: 40px !important; padding-right: 40px !important; }
  /* VDP gets nicer 2-column feel via max-width control */
  .vdp-main { max-width: 980px; }
  /* Demo info box centrado */
  .demo-info { max-width: 1100px; }
  /* TikTok mode: en PC se centra como un teléfono real con padding */
  .tt-shell {
    max-width: 420px; margin: 30px auto; height: 720px;
    border-radius: 38px; border: 10px solid #1a1a1a;
    box-shadow: 0 0 0 1px #2a2a2a, 0 30px 60px rgba(0,0,0,.5);
    overflow: hidden;
  }
  .tt-card { height: 700px; }
  /* Portal en PC: centrado con max-width */
  .portal-shell { max-width: 900px; margin: 0 auto; }
  .portal-hero { padding: 80px 40px 30px; }
  .portal-greeting { font-size: 56px; }
  /* Success page en PC */
  .success-page { padding: 60px 30px; }
  .success-card { max-width: 560px; padding: 50px 40px; }
  /* Trade-in en PC */
  .ti-page { max-width: 720px; padding: 50px 40px; }
  /* VDP: 2 columnas en PC (fotos+info izquierda, form derecha) */
  .vdp-main { max-width: 1100px; }
}

/* ULTRA DESKTOP > 1400px: 4-col grid, generous padding */
@media (min-width: 1400px) {
  .cities, .dealers-list, .cars-grid, .vdp-main, .city-hero, .dealer-hero { max-width: 1360px; }
  #live-inventory-section, #recently-viewed-section { max-width: 1360px !important; }
  .cars-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
  .hero { padding: 76px 40px 48px; }
}
/* >1700px super-wide */
@media (min-width: 1700px) {
  .cars-grid { grid-template-columns: repeat(5, 1fr); }
}
/* PREMIUM TOP NAV — Linear/Apple style */
.vh-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 28px;
  border-bottom: 1px solid var(--border-subtle);
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  position: sticky;
  top: 0;
  z-index: 50;
}
.vh-nav-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 30px; }
.vh-nav-center a { color: var(--text-secondary); font-size: 14px; font-weight: 500; text-decoration: none; font-family: inherit; cursor: pointer; transition: color .15s ease; white-space: nowrap; }
.vh-nav-center a:hover { color: var(--primary); }
@media (max-width: 720px) { .vh-nav-center { display: none !important; } }
.vh-brand {
  display: flex; align-items: center; gap: 12px;
  min-height: 44px; min-width: 44px;
  transition: opacity .15s ease, transform .15s ease;
}
.vh-brand:hover { opacity: 1; transform: translateX(-1px); }
.vh-brand:hover .brand-mark::before { transform: translateX(100%); }
.vh-brand[title]::after { content: '← home'; font-size: 10px; color: var(--text-tertiary); letter-spacing: 1px; opacity: 0; transition: opacity .15s ease; margin-left: 2px; }
.vh-brand:hover[title]::after { opacity: 1; }
/* Refined brand mark — premium gradient, subtle inner highlight, shine sweep
   on hover to differentiate from Autotiv/Aptiv visually. */
.brand-mark {
  width: 38px; height: 38px;
  border-radius: 11px;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, #d9531f 0%, #c2410c 50%, #9a3412 100%);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  font-style: italic;
  letter-spacing: -0.02em;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -1px 0 rgba(0,0,0,.22),
    0 1px 2px rgba(0,0,0,.06),
    0 6px 16px rgba(194,65,12,.32);
  transition: box-shadow .22s ease, transform .22s ease;
}
.brand-mark::before {
  /* Diagonal shine that sweeps across on hover. Looks like polished metal. */
  content: '';
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.32) 45%, transparent 60%);
  transform: translateX(-100%);
  transition: transform .65s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}
.brand-mark::after {
  /* Subtle gold accent dot in the corner — premium signal. */
  content: '';
  position: absolute; top: 4px; right: 4px;
  width: 4px; height: 4px; border-radius: 50%;
  background: linear-gradient(135deg, #fcd34d, #b08d57);
  box-shadow: 0 0 4px rgba(252,211,77,.7);
  opacity: .85;
}
.brand-name {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.02em;
  color: var(--text-primary);
}
.vh-nav-actions { display: flex; gap: 4px; align-items: center; font-size: 14px; }
.ai-chip {
  font-size: 12px; padding: 8px 14px; border-radius: 100px;
  background: var(--bg-card); color: var(--text-primary);
  border: 1px solid var(--border-default); cursor: pointer; font-family: inherit;
  font-weight: 500;
  transition: all .15s var(--ease-out);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
[data-theme="dark"] .ai-chip {
  background: rgba(255,255,255,.06);
  color: var(--text-primary);
  border-color: rgba(255,255,255,.12);
}
.ai-chip:hover {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(194,65,12,.10);
}
/* Accessibility — keyboard nav focus rings */
*:focus { outline: none; }
*:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 6px; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
.ai-chip:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); transform: translateY(-1px); }

/* ===================================================================
   APPLE-STYLE POLISH 2026-05-27
   Tighter typography, softer shadows, smoother motion, more whitespace.
   Backup of pre-redesign in public/customer-view.backup-v1.html.
   =================================================================== */

/* Smooth scroll for in-page nav. Native browser behavior, no JS. */
html { scroll-behavior: smooth; }

/* Reveal-on-scroll utility — fades sections in as they enter viewport */
.reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Hero gradient mesh background — subtle, animated, Apple/Stripe style */
.hero {
  position: relative;
  overflow: hidden;
  text-align: center;
}
.hero::before {
  content: '';
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 80%;
  background:
    radial-gradient(40% 50% at 20% 30%, rgba(194,65,12,0.10) 0%, transparent 60%),
    radial-gradient(35% 40% at 80% 20%, rgba(176,141,87,0.12) 0%, transparent 60%),
    radial-gradient(30% 45% at 50% 80%, rgba(194,65,12,0.06) 0%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  z-index: -1;
  animation: heroMesh 18s ease-in-out infinite alternate;
}
@keyframes heroMesh {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-4%, 3%, 0) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .hero::before { animation: none; }
}

/* Hero h1 — let the accent gradient feel cinematic */
.hero h1 .accent {
  display: inline-block;
  background-size: 200% 100%;
  animation: accentShift 12s ease-in-out infinite alternate;
}
@keyframes accentShift {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* Apple-style buttons — bigger, softer, more presence */
.cta-primary, .cta-large {
  letter-spacing: -0.01em;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, background 0.2s ease;
}
.cta-primary:hover, .cta-large:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(194,65,12,0.28);
}
.cta-primary:active, .cta-large:active { transform: translateY(0); }

/* Car cards — refined shadow + lift on hover, no harsh borders */
.car-card {
  border: 1px solid rgba(0,0,0,0.04) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 20px rgba(0,0,0,0.05) !important;
}
.car-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.04), 0 30px 60px rgba(0,0,0,0.10) !important;
}

/* Section eyebrow + section title rhythm — bigger, more breathing room */
.section-eyebrow {
  font-size: 11px;
  letter-spacing: 2.4px;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  margin-bottom: 14px;
  display: inline-block;
}
.section-title {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-size: clamp(28px, 4vw, 48px);
  margin-bottom: 12px;
}

/* Generous section padding on desktop — Apple breathing room */
@media (min-width: 1024px) {
  .section { padding-top: 96px; padding-bottom: 96px; }
  .section + .section { padding-top: 0; } /* avoid double-padding */
  section[data-tab="home"] { padding-top: 10px; } /* tight hero top per Angel 2026-06-13 */
}

/* Refined link underline animation (instead of static underlines) */
a.smart-link {
  position: relative;
  text-decoration: none;
  color: var(--primary);
  font-weight: 600;
}
a.smart-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
a.smart-link:hover::after { transform: scaleX(1); transform-origin: left; }
.cv-flag-emoji { font-size: 14px; display:inline-block; vertical-align:middle; margin-right:4px; line-height: 1; filter: drop-shadow(0 0 1px rgba(0,0,0,.18)); }
.cv-flag-emoji-lg { font-size: 18px; display:inline-block; line-height: 1; filter: drop-shadow(0 0 1px rgba(0,0,0,.18)); flex-shrink: 0; }
/* CSS-only flag badges. Windows doesn't render emoji-flags, falls back to
   text "US"/"MX" or nothing. These badges work on every OS using each
   country's primary colors as a gradient + 2-letter code overlay. */
.cv-flag-badge {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; border-radius: 3px; vertical-align: middle;
  position: relative; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,.18), 0 1px 2px rgba(0,0,0,.08);
  font-family: system-ui, -apple-system, sans-serif;
  font-weight: 800; letter-spacing: .5px;
}
/* US: alternating red+white horizontal stripes with a blue canton overlay
   in the top-left quadrant (40% × 54%). */
.cv-flag-badge[data-code="en"] {
  background:
    linear-gradient(to right, #3c3b6e 0, #3c3b6e 40%, transparent 40%) top left / 100% 54% no-repeat,
    repeating-linear-gradient(
      to bottom,
      #b22234 0, #b22234 16.66%,
      #ffffff 16.66%, #ffffff 33.33%
    );
}
/* Spain: red-yellow-red horizontal (yellow band is wider, ~50%). */
.cv-flag-badge[data-code="es"] { background: linear-gradient(to bottom, #aa151b 0%, #aa151b 25%, #f1bf00 25%, #f1bf00 75%, #aa151b 75%, #aa151b 100%); }
/* Portugal: green (40%) | red (60%) vertical. */
.cv-flag-badge[data-code="pt"] { background: linear-gradient(to right, #046a38 0%, #046a38 40%, #da291c 40%, #da291c 100%); }
/* France: blue-white-red vertical. */
.cv-flag-badge[data-code="fr"] { background: linear-gradient(to right, #002654 0%, #002654 33%, #ffffff 33%, #ffffff 66%, #ed2939 66%, #ed2939 100%); }
/* Germany: black-red-gold horizontal. */
.cv-flag-badge[data-code="de"] { background: linear-gradient(to bottom, #000000 0%, #000000 33%, #dd0000 33%, #dd0000 66%, #ffce00 66%, #ffce00 100%); }
/* Italy: green-white-red vertical. */
.cv-flag-badge[data-code="it"] { background: linear-gradient(to right, #008c45 0%, #008c45 33%, #f4f5f0 33%, #f4f5f0 66%, #cd212a 66%, #cd212a 100%); }
/* Arabic: pan-Arab tri-color (red-white-black) — neutral for any Arabic country. */
.cv-flag-badge[data-code="ar"] { background: linear-gradient(to bottom, #ce1126 0%, #ce1126 33%, #ffffff 33%, #ffffff 66%, #000000 66%, #000000 100%); }
/* India: saffron-white-green horizontal. */
.cv-flag-badge[data-code="hi"] { background: linear-gradient(to bottom, #ff9933 0%, #ff9933 33%, #ffffff 33%, #ffffff 66%, #138808 66%, #138808 100%); }
/* China: solid red. */
.cv-flag-badge[data-code="zh"] { background: #de2910; color: #ffffff !important; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.cv-flag-badge[data-code="ja"] { background: #ffffff; }
.cv-flag-badge[data-code="ja"]::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 55%; height: 55%; border-radius: 50%; background: #bc002d; }
.cv-flag-badge[data-code="ko"] { background: #ffffff; }
.cv-flag-badge[data-code="ko"]::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 55%; height: 55%; border-radius: 50%; background: linear-gradient(to bottom, #cd2e3a 50%, #0047a0 50%); }
/* Hide the 2-letter overlay on ALL flag badges — the colored badge alone
   is cleaner. The language code already appears as text next to the flag
   in dropdowns, so we don't need it stamped on the flag too. */
.cv-flag-badge .cv-flag-label { display: none; }
.cv-flag-badge-sm { width: 18px; height: 13px; font-size: 8px; }
.cv-flag-badge-md { width: 22px; height: 16px; font-size: 9px; }
.cv-flag-badge-lg { width: 26px; height: 19px; font-size: 10px; }
.vh-nav-actions a {
  padding: 9px 16px;
  color: var(--text-secondary);
  border-radius: 100px;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: all .2s var(--ease-out);
}
.vh-nav-actions a:hover {
  color: var(--text-primary);
  background: var(--tint-2);
}

.hero {
  padding: 20px 24px 36px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
/* Ambient glow background — subtle, multi-layer (warm tones on white) */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 800px 400px at 50% 0%, rgba(194,65,12,.06), transparent 60%),
    radial-gradient(ellipse 600px 300px at 30% 100%, rgba(176,141,87,.04), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,0,0,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.025) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  pointer-events: none;
  z-index: 0;
}
.hero > * { position: relative; z-index: 1; }

.hero h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  font-size: clamp(44px, 8vw, 88px);
  letter-spacing: -0.035em;
  line-height: 1;
  margin-bottom: 22px;
  color: var(--text-primary);
}
.hero h1 .accent {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 700;
  background: linear-gradient(135deg, var(--primary) 0%, #d9531f 50%, var(--gold) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  color: var(--primary); /* fallback if background-clip unsupported */
  letter-spacing: -0.04em;
}
.hero p {
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  font-size: clamp(15px, 2.2vw, 19px);
  color: var(--text-secondary);
  max-width: 580px;
  margin: 0 auto 36px;
  line-height: 1.65;
  letter-spacing: -0.005em;
}

/* PREMIUM SEARCH BAR — glass morphism */
.search-bar {
  max-width: 560px; margin: 0 auto;
  display: flex; gap: 6px;
  background: var(--tint-1);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--border-default);
  border-radius: 100px;
  padding: 6px;
  box-shadow: var(--shadow-md), inset 0 1px 0 var(--tint-2);
  transition: all .3s var(--ease-out);
}
.search-bar:focus-within {
  border-color: rgba(194,65,12,.4);
  background: var(--tint-2);
  box-shadow: var(--shadow-md), 0 0 0 4px rgba(194,65,12,.08), inset 0 1px 0 var(--tint-2);
}
.search-bar input {
  flex: 1; background: transparent; border: none; color: var(--text-primary);
  padding: 14px 18px; font-size: 15px; outline: none; font-family: inherit;
  letter-spacing: -0.005em;
}
.search-bar input::placeholder { color: var(--text-tertiary); }
.search-bar button {
  background: linear-gradient(180deg, #ff6a3d 0%, var(--primary) 50%, var(--primary-deep) 100%);
  color: #fff;
  border: none; padding: 14px 24px; border-radius: 100px;
  font-family: inherit;
  font-size: 13px; font-weight: 600; letter-spacing: -0.005em;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.2),
    0 4px 12px rgba(194,65,12,.32);
  transition: all .25s var(--ease-out);
}
.search-bar button:hover { transform: translateY(-1px); }

.cities { padding: 50px 24px; max-width: 1200px; margin: 0 auto; }
.cities h2 {
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 24px;
  text-align: center;
}
.city-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}
/* PREMIUM CITY CARD — glass morphism + hover lift */
/* COUNTRY / STATE PILLS — selector jerárquico premium */
.country-pill, .state-pill {
  background: var(--tint-1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  padding: 10px 16px;
  border-radius: 100px;
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: all .25s var(--ease-out);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.country-pill:hover, .state-pill:hover {
  background: var(--tint-2);
  color: var(--text-primary);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}
.country-pill.active, .state-pill.active {
  background: linear-gradient(180deg, rgba(194,65,12,.18), rgba(194,65,12,.1));
  border-color: rgba(194,65,12,.5);
  color: var(--primary);
  box-shadow: var(--shadow-glow-primary), inset 0 1px 0 var(--tint-3);
}
/* 🌎 Chip de LIBERTAD: "Ver todo" resaltado para invitar a expandir la búsqueda
   a todos los países. Sutil borde dorado cuando no está activo. */
.country-pill-all {
  border-color: rgba(176,141,87,.55);
  color: var(--text-primary);
  font-weight: 700;
}
.country-pill-all.active {
  background: linear-gradient(180deg, rgba(176,141,87,.22), rgba(176,141,87,.12));
  border-color: rgba(176,141,87,.7);
  color: var(--text-primary);
}
.state-pill {
  padding: 8px 13px;
  font-size: 12px;
}

.city-card {
  background: linear-gradient(180deg, rgba(0,0,0,.012), transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-default);
  border-radius: 16px;
  padding: 24px 20px;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all .35s var(--ease-out);
  box-shadow: var(--shadow-sm);
}
.city-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(194,65,12,.08), transparent 70%);
  opacity: 0;
  transition: opacity .35s var(--ease-out);
}
.city-card:hover {
  border-color: rgba(194,65,12,.4);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md), 0 0 24px rgba(194,65,12,.12);
}
.city-card:hover::before { opacity: 1; }
.city-card > * { position: relative; z-index: 1; }
.city-name {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
  color: var(--text-primary);
}
.city-stat {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
  letter-spacing: -0.005em;
}

.stats-row { display: flex; justify-content: center; gap: 40px; margin-top: 40px; flex-wrap: wrap; }
.stat-item { text-align: center; }
.stat-num {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 40px;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, var(--gold) 0%, var(--champagne) 50%, var(--primary) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  line-height: 1;
}
.stat-lbl {
  font-size: 11px;
  color: var(--text-tertiary);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 600;
  margin-top: 6px;
}

.feature-strip {
  padding: 60px 24px;
  margin-top: 40px;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  background:
    linear-gradient(180deg, rgba(0,0,0,.008), transparent);
}
.feature-strip-inner {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 32px;
}
.feature-block {
  text-align: left;
  padding: 8px 0;
  position: relative;
}
.feature-block .ic {
  font-size: 28px;
  margin-bottom: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(194,65,12,.12), rgba(212,175,55,.08));
  border: 1px solid var(--border-default);
  backdrop-filter: blur(12px);
}
.feature-block h3 {
  font-family: 'Manrope', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 8px;
  color: var(--text-primary);
}
.feature-block p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.65;
  letter-spacing: -0.005em;
  font-weight: 400;
}

/* ============== STEP 2: CITY VIEW (Apple-style 2026-05-27) ============== */
.city-hero {
  padding: 72px 20px 40px;
  border-bottom: 1px solid var(--border-subtle);
  max-width: 1240px;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .city-hero { padding: 110px 40px 56px; }
}
.breadcrumb {
  font-size: 12px;
  letter-spacing: 0.4px;
  color: var(--text-tertiary);
  margin-bottom: 18px;
  font-weight: 500;
}
.breadcrumb a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s;
}
.breadcrumb a:hover { color: var(--primary-deep); }
.city-title {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: clamp(36px, 6vw, 72px);
  letter-spacing: -0.025em;
  line-height: 1.0;
  margin-bottom: 14px;
  color: var(--text-primary);
}
.city-meta {
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 500;
  letter-spacing: -0.005em;
}

.filter-row {
  display: flex; gap: 6px; padding: 14px 20px; overflow-x: auto;
  border-bottom: 1px solid #1A1A1A;
}
.filter-row::-webkit-scrollbar { display: none; }
.chip {
  padding: 6px 12px; border-radius: 100px;
  background: var(--bg-card); border: 1px solid var(--border-default); color: var(--text-tertiary);
  font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.chip.active { background: rgba(194,65,12,.12); border-color: rgba(194,65,12,.3); color: #c2410c; }

/* Grid layout — 3 columns desktop, 2 tablet, 1 mobile. Scales to N dealers
   without overflowing. Previously a vertical stack of huge 860×567 cards. */
.dealers-list {
  padding: 20px;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
}
@media (max-width: 720px) {
  .dealers-list { grid-template-columns: 1fr; gap: 12px; padding: 14px; }
}
/* COMPACT DEALER CARD — Linear/Stripe style, ~360px tall */
.dealer-card {
  background: linear-gradient(180deg, rgba(0,0,0,.012), transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-default);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 0; /* grid gap handles spacing */
  cursor: pointer;
  transition: all .35s var(--ease-out);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.dealer-card:hover {
  border-color: rgba(194,65,12,.3);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
/* 2×2 photo collage of real cars — much better signal than 1 huge promo banner */
.dealer-collage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 3px;
  aspect-ratio: 16 / 10;
  border-radius: 11px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--primary-soft), var(--gold-soft));
  margin-bottom: 12px;
}
.dealer-collage-cell {
  background-size: cover;
  background-position: center;
  background-color: #f4f4f5;
}
.dealer-collage-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
  background: linear-gradient(135deg, #c2410c, #b08d57);
  aspect-ratio: 16 / 10;
  border-radius: 11px;
  margin-bottom: 12px;
}
.dealer-name {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dealer-addr {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 12px;
  font-weight: 400;
  letter-spacing: -0.005em;
}
.dealer-stats {
  display: flex; gap: 16px;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 14px;
  flex-wrap: wrap;
  font-weight: 500;
}
.dealer-stars {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--gold);
  font-weight: 600;
  letter-spacing: -0.005em;
}
.dealer-vendors { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.vendor-pill {
  background: rgba(194,65,12,.08);
  border: 1px solid rgba(194,65,12,.2);
  border-radius: 100px;
  padding: 5px 12px;
  font-size: 12px;
  color: var(--primary);
  font-weight: 600;
  letter-spacing: -0.005em;
}

/* ============== STEP 3: DEALER VIEW ============== */
.dealer-hero {
  padding: 30px 20px;
  background: radial-gradient(ellipse at top, rgba(194,65,12,.1), transparent 70%);
  border-bottom: 1px solid var(--border-default);
}
.dealer-h-name {
  font-family: 'Playfair Display', Georgia, serif; font-weight: 600; font-size: 32px; letter-spacing: -0.02em; margin-bottom: 6px; color: var(--text-primary);
}
.dealer-h-addr { font-size: 13px; color: var(--text-tertiary); margin-bottom: 10px; }
.dealer-h-stars { color: var(--gold); font-weight: 700; font-size: 14px; }
.dealer-h-meta { font-size: 12px; color: var(--text-tertiary); margin-top: 8px; }

.condition-tabs {
  display: flex; gap: 0; padding: 0 20px;
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-card);
}
.cond-tab {
  background: transparent; border: none;
  padding: 14px 20px;
  font-size: 13px; font-weight: 700;
  color: var(--text-tertiary); border-bottom: 3px solid transparent;
  letter-spacing: 1px;
  cursor: pointer;
}
.cond-tab.active { color: var(--primary); border-color: var(--primary); }

.cars-grid {
  padding: 20px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  max-width: 1200px; margin: 0 auto;
}
/* PREMIUM VEHICLE CARD — Tesla/Apple aesthetic con depth real */
/* Card: Apple/Linear-style — soft, no colored hover glow, minimal border */
.car-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  /* Condition-colored top stripe — instant scan when scrolling the grid.
     Default = neutral (used). New/certified override below. */
  border-top: 4px solid var(--neutral);
  border-radius: var(--r-xl);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition: transform .25s var(--ease-out), box-shadow .25s ease;
  box-shadow: var(--shadow-sm);
}
.car-card.cond-new { border-top-color: var(--success); }
.car-card.cond-used { border-top-color: var(--neutral); }
.car-card.cond-certified, .car-card.cond-cpo { border-top-color: var(--warning); }
.car-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(0,0,0,.04), 0 14px 36px rgba(0,0,0,.08);
}
.car-photo {
  aspect-ratio: 16/10;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border-subtle);
  background-color: var(--bg-elevated, #f4f4f5);
  /* angel-eye premium upgrade: cards Carvana-style con hover lift + zoom suave */
  transition: transform .35s cubic-bezier(.25,.1,.25,1);
}
/* Lazy-load (2026-09-09): fundido suave cuando la foto real entra, en vez de
   aparecer de golpe. Antes de cargar se ve solo el color de fondo (ni negro
   ni blanco puro, para no destacar). */
.car-photo[data-bg] { background-image: none; }
.car-photo.car-photo--loaded { animation: auttivPhotoFade .3s ease; }
@keyframes auttivPhotoFade { from { opacity: .35; } to { opacity: 1; } }
.car-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.4) 100%);
  pointer-events: none;
}
/* Hover zoom + lift premium en cards (desktop solamente) */
@media (hover: hover) and (min-width: 768px) {
  .car-card { transition: transform .25s cubic-bezier(.25,.1,.25,1), box-shadow .25s ease; }
  .car-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
  }
  .car-card:hover .car-photo { transform: scale(1.04); }
}
/* Blur-up effect placeholder (mientras carga) — Medium/Linear style */
.car-photo > img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity .4s ease, filter .4s ease;
}
.car-photo > img[data-loading="true"] { opacity: 0; filter: blur(20px); }
.car-photo > img.loaded { opacity: 1; filter: blur(0); }

/* Photo count badge — "12 photos" en cards (Carvana/CarGurus style) */
.car-photo-count {
  position: absolute;
  bottom: 8px; left: 8px;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 100px;
  z-index: 2;
  letter-spacing: .3px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.car-photo-count::before { content: ''; font-size: 10px; }

/* "Just listed" / "Price drop" / Hot badges premium */
.car-status-badge {
  position: absolute;
  top: 8px; left: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 100px;
  z-index: 2;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.car-status-badge.new-listing { background: rgba(34,197,94,.92); color: #fff; }
.car-status-badge.price-drop  { background: rgba(239,68,68,.92); color: #fff; }
.car-status-badge.hot         { background: rgba(245,158,11,.92); color: #fff; }
@keyframes ae-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}
.car-status-badge.hot { animation: ae-pulse 2s ease-in-out infinite; }

/* ═══════════ PREMIUM VDP GALLERY (cinematic upgrade) ═══════════
   Counter, swipe gestures, blur-up, smooth transitions. */
#vdp-main-photo {
  position: relative;
  cursor: zoom-in;
  background: #0A0A0A;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 16/9;
}
#vdp-main-photo > img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
  transition: transform .4s cubic-bezier(.25,.1,.25,1);
}
@media (hover: hover) {
  #vdp-main-photo:hover > img { transform: scale(1.03); }
}
/* Photo counter premium (Carvana style) */
.vdp-photo-counter {
  position: absolute;
  bottom: 16px; right: 16px;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
  padding: 8px 14px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .3px;
  z-index: 3;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.vdp-photo-counter::before { content: ''; font-size: 14px; opacity: .85; }
/* Photo nav arrows (premium swipe alternative) */
.vdp-photo-nav {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  border: 0;
  border-radius: 50%;
  font-size: 22px;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transition: background .2s, transform .15s;
  user-select: none;
}
.vdp-photo-nav:hover { background: rgba(0,0,0,.78); transform: translateY(-50%) scale(1.05); }
.vdp-photo-nav:active { transform: translateY(-50%) scale(.95); }
.vdp-photo-nav.prev { left: 12px; }
.vdp-photo-nav.next { right: 12px; }
@media (max-width: 640px) {
  /* En mobile, swipe directo es preferible. Ocultamos arrows. */
  .vdp-photo-nav { display: none; }
}

/* ═══════════ DRIVEWAY PREVIEW (DIFERENCIADOR ÚNICO ANGEL-EYE) ═══════════
   Único en el mundo: ningún competitor lo tiene. Buyer ve el carro
   en un "driveway" con sombra realista y ambiente cinematic.
   Mismo principio que Tesla configurator pero para CUALQUIER carro
   en el marketplace. CSS-only, sin AR complejo. */
.driveway-preview {
  position: relative;
  padding: 32px 16px 40px;
  background:
    radial-gradient(ellipse at 50% 90%, rgba(0,0,0,.22) 0%, transparent 55%),
    linear-gradient(180deg,
      var(--bg-base) 0%,
      var(--tint-1) 40%,
      #d4d4d4 70%,
      #b8b8b8 100%);
  border-radius: 18px;
  overflow: hidden;
  margin: 18px 0;
}
[data-theme="dark"] .driveway-preview {
  background:
    radial-gradient(ellipse at 50% 90%, rgba(0,0,0,.55) 0%, transparent 55%),
    linear-gradient(180deg,
      #0a0a0a 0%,
      #1c1917 40%,
      #2a2825 70%,
      #1c1917 100%);
}
.driveway-preview .driveway-floor {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 35%;
  background:
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,.15) 100%),
    repeating-linear-gradient(90deg,
      transparent 0px, transparent 18px,
      rgba(0,0,0,.06) 18px, rgba(0,0,0,.06) 19px);
  border-top: 1px solid rgba(0,0,0,.08);
}
.driveway-preview .driveway-img {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  display: block;
  filter: drop-shadow(0 22px 24px rgba(0,0,0,.35));
  transition: transform .5s cubic-bezier(.25,.1,.25,1);
}
.driveway-preview:hover .driveway-img { transform: translateY(-4px); }
/* .driveway-label CSS removed — orphan class, never rendered in HTML.
   Removed 2026-06-07 per angel-eye R1 detector. */
.car-photo-1 { background: linear-gradient(135deg, #1f1f1f, #3a3a3a 60%, #525252); }
.car-photo-2 { background: linear-gradient(135deg, #0f1a2a, #1a2a45 60%, #2a3a55); }
.car-photo-3 { background: linear-gradient(135deg, #2a1f15, #3f2f1f 60%, #5a4530); }
.car-photo-4 { background: linear-gradient(135deg, #141414, #2a2a2a 60%, #3a3a3a); }
.car-photo-5 { background: linear-gradient(135deg, #1f1525, #2f1f35 60%, #4a2a4a); }
.car-photo-6 { background: linear-gradient(135deg, #15201a, #1f2f25 60%, #2a4a35); }
.car-photo .emoji {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-size: 56px;
  opacity: .42;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.5));
}
/* NEW vs USED badges — harmonized with dealer page + seller console.
   Top-LEFT in the SPA because top-right is occupied by heart + compare
   interactive buttons (would clash if badge took that corner). */
.car-badge {
  position: absolute; top: 10px; left: 10px;
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  font-weight: 800;
  padding: 5px 11px;
  border-radius: 100px;
  letter-spacing: .1em;
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 4px;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  border: 0;
  color: #fff;
}
.car-badge.new {
  background: linear-gradient(135deg, #16a34a, #15803d);
}
.car-badge.used {
  background: linear-gradient(135deg, #475569, #334155);
}
.car-badge.cpo, .car-badge.certified {
  background: linear-gradient(135deg, #d97706, #b45309);
}
/* "Foto pronto" — distinctive marker for cards still using a dealer
   placeholder/banner photo. Sits top-RIGHT so it doesn't collide with
   the NEW/USED/CERTIFIED badge on the top-left. Cards with this badge
   are also sorted to the end of the inventory. */
.car-badge-coming {
  position: absolute; top: 10px; right: 10px;
  background: rgba(0,0,0,.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #fef3c7; font-size: 10px; font-weight: 700;
  letter-spacing: .5px; padding: 5px 10px; border-radius: 100px;
  border: 1px solid rgba(255,255,255,.18);
  z-index: 3;
}
.car-card.is-banner { opacity: .78; }
.car-card.is-banner:hover { opacity: 1; }
/* Body-style filter chips */
.bs-chip {
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  padding: 9px 16px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all .18s var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.bs-chip:hover { border-color: var(--primary); color: var(--text-primary); transform: translateY(-1px); }
.bs-chip.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 4px 14px rgba(194,65,12,.25);
}
/* Card hover lift + better photo treatment (Carvana-grade) */
.car-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 20px 48px rgba(0,0,0,.10), 0 4px 12px rgba(194,65,12,.06);
  border-color: rgba(194,65,12,.22) !important;
}
.car-card .car-title {
  font-family: 'Playfair Display', serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.25;
}
.car-card .car-price {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--primary-deep);
  letter-spacing: -.01em;
}
.car-card .car-trim { color: var(--text-tertiary); font-size: 13px; margin-top: 4px; }
.car-card .car-meta { color: var(--text-tertiary); font-size: 11px; margin-top: 10px; letter-spacing: .02em; font-weight: 500; }
.car-card .car-photo { position: relative; overflow: hidden; }
.car-card:hover .car-photo { filter: brightness(1.04); }
/* Deal-rating badge (CarGurus / TrueCar pattern) */
.deal-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .01em;
  padding: 4px 9px;
  border-radius: 6px;
  margin-bottom: 8px;
  line-height: 1.2;
}
.deal-badge.great { background: linear-gradient(180deg, #dcfce7, #bbf7d0); color: #14532d; border: 1px solid rgba(22,163,74,.25); }
.deal-badge.good  { background: linear-gradient(180deg, #ecfccb, #d9f99d); color: #365314; border: 1px solid rgba(101,163,13,.25); }

/* Home card enrichment (CarGurus-grade): deal pill row, dealer location, CTA.
   Kept intentionally clean/premium — one accent (deal pill) + calm meta. */
.car-card .car-deal-row { margin-bottom: 8px; }
.car-card .car-loc {
  color: var(--text-tertiary);
  font-size: 12px;
  margin-top: 6px;
  font-weight: 500;
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Monthly estimate (CarGurus "$X/mo est." pattern). Orientative only — the big
   price above is always the dealer's advertised price. */
.car-card .car-monthly {
  color: var(--text-secondary);
  font-size: 12.5px;
  margin-top: 3px;
  font-weight: 600;
  letter-spacing: .01em;
  font-variant-numeric: lining-nums tabular-nums;
}
.car-card .car-cta {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 11px 12px;
  min-height: 44px;
  border: 1px solid var(--border-default);
  border-radius: 10px;
  background: var(--tint-1);
  color: var(--primary-deep, var(--primary));
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.car-card .car-cta:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.car-card:hover .car-cta { border-color: rgba(194,65,12,.30); }
[data-theme="dark"] .car-card .car-cta { background: rgba(255,255,255,.04); }
[data-theme="dark"] .car-card .car-cta:hover { background: var(--primary); color: #fff; }

/* Photo count badge (bottom-right of car-photo) */
.car-photo .photo-count {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0,0,0,.62);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 100px;
  letter-spacing: .02em;
  backdrop-filter: blur(6px);
  z-index: 1;
}
.car-photo .stock-badge {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: rgba(0,0,0,.62);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 100px;
  letter-spacing: .08em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
  z-index: 1;
}

/* Saved counter in top nav */
#saved-counter {
  display: none;
  background: linear-gradient(180deg, #fda4af, #f43f5e);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 100px;
  letter-spacing: .02em;
  white-space: nowrap;
}
/* Ángel 2026-06-27: el corazón de favoritos va EN las tarjetas (arriba a la
   derecha), NO en la barra de navegación. Ocultamos el pill contador "♥N" —
   "Mi Garaje" ya es el acceso a los guardados. !important para ganarle al
   display:inline-flex que pone updateSavedCounter() inline. */
#saved-counter-link, #saved-counter { display: none !important; }
/* Reserve space for car-card and VDP photos to prevent layout shift (CLS). */
.car-photo { aspect-ratio: 16 / 10; }
.vdp-photos, #vdp-main-photo { aspect-ratio: 16 / 9; min-height: 0; }
.car-info { padding: 18px; position: relative; z-index: 1; }

/* Premium skeleton loaders (replace "Loading…" text everywhere) */
@keyframes auttiv-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skel {
  background: linear-gradient(90deg, #f4f4f5 0%, #e4e4e7 25%, #f4f4f5 50%);
  background-size: 800px 100%;
  animation: auttiv-shimmer 1.4s linear infinite;
  border-radius: 8px;
  color: transparent;
}
.skel-card {
  background: #fff;
  border: 1px solid var(--border-default);
  border-radius: 18px;
  overflow: hidden;
}
.skel-card .skel-photo { aspect-ratio: 16/10; }
.skel-card .skel-body { padding: 18px; }
.skel-card .skel-line { height: 12px; margin: 8px 0; }
.skel-card .skel-line.w70 { width: 70%; }
.skel-card .skel-line.w40 { width: 40%; }
.skel-card .skel-line.w50 { width: 50%; }
.car-title {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.car-trim {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.car-price-row {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.car-price {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 26px;
  color: var(--text-primary);
  letter-spacing: -0.025em;
  line-height: 1;
}
/* Desglose del dealer: precio de lista tachado + "Ahorra $X" — SOLO cuando el
   feed del dealer trae msrp > price. Auttiv nunca calcula precios. */
.msrp-cut { display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.msrp-strike { font-size: 12.5px; color: var(--text-tertiary); text-decoration: line-through; font-weight: 500; }
.dealer-save-badge {
  font-size: 10.5px; font-weight: 800; color: #15803d;
  background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.25);
  border-radius: 100px; padding: 2px 8px; letter-spacing: .02em; white-space: nowrap;
}
[data-theme="dark"] .dealer-save-badge { color: #4ade80; background: rgba(34,197,94,.14); border-color: rgba(74,222,128,.3); }
.car-month {
  background: rgba(194,65,12,.08);
  border: 1px solid rgba(194,65,12,.22);
  color: var(--primary);
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.car-meta {
  font-size: 12px;
  color: var(--text-tertiary);
  font-weight: 500;
  letter-spacing: -0.005em;
}

/* ============== STEP 4: VDP (Vehicle Detail Page) ============== */
.vdp-main { max-width: 900px; margin: 0 auto; padding: 20px; }
/* VDP cinema gallery — Round 3 premium polish */
.vdp-photos {
  aspect-ratio: 16/9;          /* cinematic, not 16/10 catalog */
  border-radius: var(--r-modal, 16px);
  overflow: hidden;
  background: #0A0A0A;         /* true dark letterbox (Tesla/Lucid move) */
  position: relative;
  margin-bottom: 14px;
  box-shadow: var(--sh-3, 0 8px 24px rgba(10,10,11,.08));
  transition: box-shadow var(--dur-base, 200ms) var(--ease-standard, cubic-bezier(.2,.8,.2,1));
}
.vdp-photos:hover { box-shadow: var(--sh-4, 0 16px 48px rgba(10,10,11,.12)); }
.vdp-photos .emoji {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-size: 100px; opacity: .35;
}
.vdp-thumbs {
  display: flex; gap: 8px;
  margin-bottom: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 8px;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}
.vdp-thumbs::-webkit-scrollbar { display: none; }
.vdp-thumb {
  width: 84px; height: 58px;
  border-radius: 10px;
  background: #1c1917;
  flex-shrink: 0;
  cursor: pointer;
  scroll-snap-align: start;
  overflow: hidden;
  border: 2px solid transparent;
  box-shadow: var(--sh-1, 0 1px 2px rgba(10,10,11,.04));
  transition: transform var(--dur-fast, 120ms) var(--ease-standard, cubic-bezier(.2,.8,.2,1)),
              box-shadow var(--dur-fast, 120ms) var(--ease-standard, cubic-bezier(.2,.8,.2,1));
}
.vdp-thumb:hover { transform: translateY(-2px); box-shadow: var(--sh-2, 0 2px 8px rgba(10,10,11,.06)); }
.vdp-thumb.active {
  border-color: var(--primary, #c2410c);
  box-shadow: var(--sh-2, 0 2px 8px rgba(10,10,11,.06)), 0 0 0 3px rgba(194, 65, 12, 0.15);
  transform: translateY(-2px);
}

.vdp-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  margin-top: 28px;
}
.vdp-name {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--text-primary);
}
.vdp-prices { text-align: right; flex-shrink: 0; }
.vdp-price {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: clamp(30px, 4vw, 42px);
  color: var(--primary);
  letter-spacing: -0.02em;
  line-height: 1;
}
.vdp-month-est {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 6px;
  font-weight: 500;
}
/* Auttiv Deal Score — calibrated honestly against same year+make+model. */
.deal-score {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid transparent;
  white-space: nowrap;
}
.deal-score-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.deal-score-great { background: rgba(34,197,94,.10); color: #15803d; border-color: rgba(34,197,94,.30); }
.deal-score-great .deal-score-dot { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
.deal-score-good { background: rgba(132,204,22,.10); color: #3f6212; border-color: rgba(132,204,22,.30); }
.deal-score-good .deal-score-dot { background: #84cc16; }
.deal-score-fair { background: rgba(100,116,139,.10); color: #475569; border-color: rgba(100,116,139,.25); }
.deal-score-fair .deal-score-dot { background: #64748b; }
.deal-score-above { background: rgba(234,179,8,.10); color: #a16207; border-color: rgba(234,179,8,.30); }
.deal-score-above .deal-score-dot { background: #eab308; }
.deal-score-high { background: rgba(239,68,68,.08); color: #b91c1c; border-color: rgba(239,68,68,.25); }
.deal-score-high .deal-score-dot { background: #ef4444; }
.deal-score-savings {
  display: block;
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 4px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
#auttiv-compare-tray {
  position: fixed;
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  bottom: 18px;
  background: rgba(15,23,42,.96);
  color: #fff;
  border-radius: 14px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 9100;
  box-shadow: 0 20px 50px rgba(0,0,0,.30);
  font-size: 13px;
  max-width: 92vw;
  /* 🟥 Bug móvil (Ángel 2026-07-09): oculto = translateY(120%) de SU altura; en móvil la
     barra vive 88px arriba del nav → al "cerrar" bajaba poquito y QUEDABA VISIBLE sobre
     el menú (la X parecía muerta). Oculto real: invisible + sin toques. */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform .3s cubic-bezier(.2,.7,.2,1), opacity .25s ease, visibility .25s;
}
#auttiv-compare-tray.visible { transform: translateX(-50%) translateY(0); opacity: 1; visibility: visible; pointer-events: auto; }
/* Mobile (≤720px) the bottom nav (.mbn, ~76px tall) is fixed at bottom:0 and
   would sit on top of the compare tray. Lift the tray above it (plus the
   safe-area inset) so the "Compare" CTA stays tappable. */
@media (max-width: 720px) {
  #auttiv-compare-tray { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
}
#auttiv-compare-tray .ct-chip { background: rgba(255,255,255,.08); padding: 6px 10px; border-radius: 8px; font-weight: 600; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#auttiv-compare-tray .ct-btn { background: var(--primary); color: #fff; border: 0; padding: 8px 14px; border-radius: 100px; font-weight: 700; font-size: 12px; cursor: pointer; font-family: inherit; }
#auttiv-compare-tray .ct-x { background: transparent; color: rgba(255,255,255,.65); border: 0; cursor: pointer; font-size: 18px; padding: 12px; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }


.vdp-meta-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 26px;
}
.vdp-meta-row span {
  background: var(--tint-1);
  padding: 7px 14px;
  border-radius: 100px;
  border: 1px solid var(--border-subtle);
  font-weight: 500;
  letter-spacing: 0.1px;
}

.urgency-stack {
  display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px;
}
.urg-card {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 10px; font-size: 13px;
}
.urg-orange { background: rgba(194,65,12,.06); border: 1px solid rgba(194,65,12,.18); color: var(--text-secondary); }
.urg-orange strong { color: #FFB199; }
.urg-yellow { background: rgba(234,179,8,.06); border: 1px solid rgba(234,179,8,.18); color: var(--text-secondary); }
.urg-yellow strong { color: #EAB308; }
.urg-green { background: rgba(34,197,94,.06); border: 1px solid rgba(34,197,94,.18); color: var(--text-secondary); }
.urg-green strong { color: #22C55E; }

.vdp-features {
  background: var(--bg-card); border: 1px solid var(--border-default); border-radius: 14px;
  padding: 16px; margin-bottom: 18px;
}
.vdp-features h3 { font-family: inherit; font-size: 11.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-tertiary); font-weight: 700; margin-bottom: 14px; }
.vdp-features ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; font-size: 13.5px; color: var(--text-secondary); }
.vdp-features li { display: flex; align-items: center; gap: 8px; }
.vdp-features li::before { content: '✓'; color: var(--primary); font-weight: 700; flex-shrink: 0; }

.lead-form-box {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(194,65,12,.06);
  border-radius: 16px; padding: 22px;
  margin-bottom: 18px;
}
[data-theme="dark"] .lead-form-box {
  background: linear-gradient(180deg, #1f1a17, #15110f);
  border-color: rgba(194,65,12,.28);
  box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
}
.lead-form-h { font-family: 'Playfair Display', serif; font-style: italic; font-size: 26px; font-weight: 600; color: var(--primary, #c2410c); margin-bottom: 6px; letter-spacing: 0; }
.lead-form-sub { font-size: 14px; color: var(--text-secondary); margin-bottom: 16px; line-height: 1.55; }
.field { margin-bottom: 10px; }
.field label { display: block; font-size: 11px; color: var(--text-tertiary); font-weight: 600; margin-bottom: 4px; }
.field input, .field textarea {
  width: 100%; background: var(--bg-elevated); border: 1px solid var(--border-default); color: var(--text-primary);
  /* 16px (era 14px) — QA ola 2 2026-08-11: evita el auto-zoom de iOS Safari al
     enfocar los inputs del lead form (embudo de conversión), igual que ya se hizo
     en signup/buscador. Aplica en todos los viewports; no afecta desktop. */
  padding: 11px 14px; border-radius: 9px; font-size: 16px; font-family: inherit; outline: none;
}
.consent-block {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px; background: rgba(194,65,12,.05);
  border: 1px solid rgba(194,65,12,.2); border-radius: 9px;
  font-size: 11.5px; color: var(--text-secondary); line-height: 1.55; margin: 10px 0 12px;
}
.consent-block input { margin-top: 2px; accent-color: #c2410c; flex-shrink: 0; }
.consent-block strong { color: var(--text-primary); }
.sms-sample {
  margin-top: 8px; padding: 8px 10px; background: var(--bg-base);
  border-left: 3px solid #c2410c; border-radius: 4px;
  font-size: 11px; color: var(--text-tertiary); font-style: italic; line-height: 1.5;
}
.cta-large {
  width: 100%; padding: 15px;
  background: linear-gradient(90deg,#9a3412,#c2410c); color: #fff;
  border: none; border-radius: 11px;
  font-size: 15px; font-weight: 800; letter-spacing: .5px;
  box-shadow: 0 8px 24px rgba(194,65,12,.4);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.disclaimer-small {
  text-align: center; font-size: 11px; color: var(--text-tertiary); margin-top: 12px; line-height: 1.5;
}

/* ============== STEP 5: SUCCESS / "ESTA EN CAMINO" ============== */
.success-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 30px;
  background: radial-gradient(ellipse at center, rgba(34,197,94,.12), transparent 60%);
}
.success-card {
  max-width: 480px; text-align: center;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default); border-radius: 20px;
  padding: 36px 28px;
  box-shadow: var(--shadow-lg);
}
.success-emoji { font-size: 64px; margin-bottom: 14px; }
.success-title {
  font-family: 'Bebas Neue'; font-size: 38px; letter-spacing: 2px;
  color: #22C55E; margin-bottom: 12px;
}
.success-text { font-size: 15px; color: var(--text-secondary); line-height: 1.7; margin-bottom: 22px; }
.success-text strong { color: var(--text-primary); }
.timeline-row {
  display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 14px; background: var(--bg-elevated); border: 1px solid var(--border-default);
  border-radius: 12px; margin-bottom: 10px;
}
.timeline-num {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(5,150,105,.12); color: #059669;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; flex-shrink: 0;
}
.timeline-name { font-size: 13px; font-weight: 600; }
.timeline-sub { font-size: 11px; color: var(--text-tertiary); }

/* ============== STEP 6: CUSTOMER PORTAL (after SMS) ============== */
.portal-shell {
  min-height: 100vh; background: var(--bg-base);
}
.portal-hero {
  padding: 50px 24px 24px;
  background: radial-gradient(ellipse at top, rgba(194,65,12,.18), transparent 60%);
  text-align: center;
}
.portal-vendor-pill {
  display: inline-block; font-size: 11px; color: #c2410c;
  font-weight: 700; letter-spacing: 2px; margin-bottom: 12px;
  padding: 4px 10px; background: rgba(194,65,12,.08); border-radius: 100px;
}
.portal-greeting {
  font-family: 'Bebas Neue'; font-size: 38px; letter-spacing: 2px;
  margin-bottom: 12px; line-height: 1;
}
.portal-greeting .name { color: #c2410c; }
.portal-msg {
  font-size: 14px; color: var(--text-secondary); line-height: 1.6;
  max-width: 480px; margin: 0 auto 20px;
}
.portal-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

.portal-body { max-width: 900px; margin: 0 auto; padding: 20px; }
.portal-budget-box {
  background: rgba(34,197,94,.06); border: 1px solid rgba(34,197,94,.25);
  border-radius: 12px; padding: 14px; margin-bottom: 18px;
  font-size: 13px; color: #86EFAC; text-align: center;
}
.portal-section { margin-bottom: 30px; }
.portal-section h2 { font-family: 'Bebas Neue'; font-size: 22px; letter-spacing: 2px; margin-bottom: 12px; }

.portal-footer {
  margin-top: 30px; padding: 20px 24px;
  border-top: 1px solid var(--border-default); text-align: center;
  font-size: 11px; color: var(--text-tertiary); line-height: 1.7;
}

/* ============== STEP 7: TIKTOK MODE ============== */
.tt-shell {
  background: var(--bg-card);
  height: 100vh;
  position: relative;
  overflow: hidden;
}
.tt-card {
  width: 100%; height: 100vh;
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: linear-gradient(180deg, #1a1a1a 0%, #2a2a3a 30%, #c2410c40 60%, #1a1a1a 100%);
}
.tt-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.85) 100%);
}
.tt-emoji {
  position: absolute; top: 40%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 140px; opacity: .4;
}
.tt-top {
  position: absolute; top: 14px; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; z-index: 2;
}
.tt-pill {
  background: rgba(0,0,0,.5); backdrop-filter: blur(8px);
  padding: 6px 12px; border-radius: 100px;
  font-size: 11px; font-weight: 700; letter-spacing: 1px;
}
.tt-side {
  position: absolute; right: 14px; bottom: 130px;
  display: flex; flex-direction: column; gap: 18px; z-index: 2;
}
.tt-action {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: transparent; border: none; color: var(--text-primary);
}
.tt-action-icon {
  width: 46px; height: 46px; border-radius: 23px;
  background: rgba(0,0,0,.5); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.tt-action-count { font-size: 11px; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,.8); }
.tt-bottom {
  position: relative; z-index: 2;
  padding: 22px 84px 38px 18px;
}
.tt-hook { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.tt-name { font-family: 'Bebas Neue'; font-size: 32px; letter-spacing: 1.5px; line-height: 1; margin-bottom: 4px; }
.tt-price-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.tt-price-big { font-family: 'Bebas Neue'; font-size: 38px; color: #c2410c; letter-spacing: 1px; line-height: 1; }
.tt-price-mo {
  background: rgba(194,65,12,.2); border: 1px solid rgba(194,65,12,.4);
  padding: 4px 10px; border-radius: 6px; font-size: 13px; font-weight: 600;
}
.tt-meta { font-size: 13px; color: var(--text-secondary); margin-bottom: 14px; }
.tt-want {
  background: linear-gradient(90deg,#9a3412,#c2410c); color: #fff;
  padding: 14px 24px; border-radius: 100px;
  font-size: 16px; font-weight: 800; letter-spacing: 1px;
  border: none; box-shadow: 0 8px 24px rgba(194,65,12,.5);
}
.tt-hint {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  color: var(--text-tertiary); font-size: 10px; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
}

/* ============== STEP 8: TRADE-IN ============== */
.ti-page { max-width: 540px; margin: 0 auto; padding: 30px 20px; }
.ti-h { font-family: 'Bebas Neue'; font-size: 28px; letter-spacing: 2px; margin-bottom: 6px; }
.ti-sub { font-size: 13px; color: var(--text-tertiary); margin-bottom: 22px; }
.ti-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.ti-slot {
  aspect-ratio: 4/3; background: var(--bg-card);
  border: 2px dashed var(--border-default); border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--text-secondary); font-size: 11px; font-weight: 700; letter-spacing: .12em;
  cursor: pointer; transition: border-color .15s, background .15s, transform .15s, color .15s;
  gap: 10px; position: relative;
}
.ti-slot::before {
  content: '';
  font-size: 36px;
  line-height: 1;
  opacity: .65;
  transition: opacity .15s, transform .15s;
}
.ti-slot > span { line-height: 1.2; }
.ti-slot:hover { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); transform: translateY(-1px); }
.ti-slot:hover::before { opacity: 1; transform: scale(1.08); }
.ti-slot.filled {
  border: 1px solid var(--primary);
  background: var(--primary-soft);
  padding: 0;
  color: transparent;
  cursor: default;
  gap: 0;
}
.ti-slot.filled::before { display: none; }
.ti-slot.filled:hover { transform: none; }
.ti-result {
  background: linear-gradient(180deg, #18120f, #0c0a09);
  border: 1px solid #c2410c; border-radius: 16px;
  padding: 22px; margin-top: 16px;
}
.ti-result-h { font-family: 'Bebas Neue'; font-size: 22px; letter-spacing: 2px; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.ti-result-conf {
  font-size: 9px; font-weight: 800; padding: 3px 7px;
  border-radius: 4px; background: rgba(234,179,8,.15); color: #EAB308;
}
.ti-detected { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.ti-detected-sub { font-size: 12px; color: var(--text-tertiary); margin-bottom: 14px; }
.ti-range {
  background: rgba(194,65,12,.08); border: 1px solid rgba(194,65,12,.3);
  border-radius: 12px; padding: 16px; text-align: center; margin-bottom: 14px;
}
.ti-range-mid { font-family: 'Bebas Neue'; font-size: 42px; color: #fb923c; letter-spacing: 1px; line-height: 1; }
.ti-range-sub { font-size: 12px; color: var(--text-tertiary); margin-top: 4px; }
.ti-damages-h { font-size: 12px; font-weight: 700; margin-bottom: 6px; }
.ti-dmg { font-size: 12px; color: #FFB199; line-height: 1.6; }
.ti-disclaimer {
  font-size: 11px; color: var(--text-tertiary); background: var(--bg-base);
  padding: 10px; border-radius: 6px; margin-top: 12px; line-height: 1.5;
}

/* helper */
.demo-info {
  background: rgba(59,130,246,.06); border: 1px solid rgba(59,130,246,.2);
  border-left: 4px solid #3B82F6; border-radius: 8px;
  padding: 14px 16px; margin: 20px;
  font-size: 13px; color: #93C5FD; line-height: 1.6;
  max-width: 900px; margin: 20px auto;
  display: none; /* HIDDEN by default — only visible in founder mode */
}
.demo-info strong { color: #fff; }
body.founder-mode .demo-info { display: block; }

/* Demo bar (top navigation) también oculta por default — vista pura producto */
.demo-bar { display: none !important; }
body.founder-mode .demo-bar { display: block; }

/* Founder mode indicator */
body.founder-mode::before {
  content: 'FOUNDER MODE';
  position: fixed; top: 6px; left: 6px;
  background: rgba(194,65,12,.15); color: #c2410c;
  font-size: 9px; font-weight: 800; letter-spacing: 2px;
  padding: 4px 8px; border-radius: 4px;
  z-index: 9999;
  border: 1px solid rgba(194,65,12,.3);
}

/* Theme toggle button — small icon button in nav, near lang picker */
.theme-toggle{background:transparent;border:1px solid var(--border-default);color:var(--text-secondary);width:44px;height:44px;min-width:44px;min-height:44px;border-radius:50%;cursor:pointer;font-size:14px;display:inline-flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s,color .15s;font-family:inherit}
.theme-toggle:hover{background:var(--tint-1);border-color:var(--border-strong);color:var(--text-primary)}
.theme-toggle .icon-sun,.theme-toggle .icon-moon{line-height:1}
[data-theme="dark"] .theme-toggle .icon-sun{display:inline}
[data-theme="dark"] .theme-toggle .icon-moon{display:none}
[data-theme="light"] .theme-toggle .icon-sun,html:not([data-theme="dark"]) .theme-toggle .icon-sun{display:none}
[data-theme="light"] .theme-toggle .icon-moon,html:not([data-theme="dark"]) .theme-toggle .icon-moon{display:inline}

/* ══════════ ROUND 6 — PULIDO PREMIUM (microinteracciones, focus, motion) ══════════
   Capa aislada: solo toca estados :hover/:focus/:active y transiciones — nunca
   el layout base. Identificado por auditoría 2026-06-12. Curva premium Apple:
   cubic-bezier(0.16,1,0.3,1). Respeta prefers-reduced-motion. */
:root{ --ease-premium:cubic-bezier(0.16,1,0.3,1); }

/* — Inputs: focus suave con anillo (búsqueda, formularios) — */
.search-bar input{ transition:border-color .18s var(--ease-premium), box-shadow .18s var(--ease-premium), background .18s var(--ease-premium); }
.search-bar input:focus{ border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft), 0 4px 14px rgba(194,65,12,.13); }
.search-bar button{ transition:transform .18s var(--ease-premium), box-shadow .18s var(--ease-premium), background .18s var(--ease-premium); }
.search-bar button:hover{ box-shadow:0 4px 14px rgba(194,65,12,.22); }

/* — Anillo de foco premium para navegación por teclado (sin molestar al mouse) — */
.search-bar input:focus-visible, .ab-otp-input:focus-visible, .ai-chip:focus-visible,
.car-card:focus-visible, .city-card:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; box-shadow:0 0 0 4px rgba(194,65,12,.12); }

/* — Foto del carro: zoom más suave y profundo en hover — */
.car-photo, .car-card img{ transition:transform .4s var(--ease-premium); }
@media (hover:hover){ .car-card:hover .car-photo, .car-card:hover img{ transform:scale(1.045); } }

/* — City/Dealer cards: lift coherente con .car-card (antes solo cambiaban opacity) — */
@media (hover:hover){
  .city-card, .dealer-card{ transition:transform .3s var(--ease-premium), box-shadow .3s var(--ease-premium); }
  .city-card:hover, .dealer-card:hover{ transform:translateY(-3px); box-shadow:var(--sh-3); }
}

/* — Filtros drawer: entra deslizando desde la derecha (antes aparecía de golpe) — */
@keyframes drawerSlideIn{ from{ transform:translateX(40px); opacity:.4; } to{ transform:translateX(0); opacity:1; } }
@media (hover:hover){ #filter-drawer.open > *:last-child, #filter-drawer.open aside, #filter-drawer.open .drawer-panel{ animation:drawerSlideIn .3s var(--ease-premium); } }

/* — Empty state del collage del dealer: más cálido en oscuro — */
[data-theme="dark"] .dealer-collage-empty{ background:linear-gradient(135deg, rgba(251,146,60,.22), rgba(212,175,117,.16)); color:rgba(255,255,255,.82); }

/* — Feedback táctil sutil al presionar cualquier botón principal — */
@media (hover:hover){ .btn-primary:active, .cta-large:active, .search-bar button:active{ transform:translateY(0) scale(.985); } }

/* — Touch targets ≥44px (WCAG 2.5.5): los botones chicos (cerrar chat, guardar
   carro) miden 34px. Expandimos el ÁREA clickeable a 44px con un ::after
   invisible — el botón se ve igual, pero el dedo lo acierta en móvil. — */
[aria-label="Close chat"], [aria-label="Save this car"]{ position:relative; }
[aria-label="Close chat"]::after, [aria-label="Save this car"]::after{ content:''; position:absolute; inset:-6px; border-radius:inherit; }

/* — Respeta a quien pide menos movimiento (accesibilidad) — */
@media (prefers-reduced-motion:reduce){
  .car-photo, .car-card img, .city-card, .dealer-card, .search-bar button, .search-bar input{ transition:none !important; }
  #filter-drawer.open > *, #filter-drawer.open aside, #filter-drawer.open .drawer-panel{ animation:none !important; }
}
/* ══════════ fin ROUND 6 ══════════ */