/* 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; } } } /* ═══════════ AI HELPER FLOATING BUTTON — DIFERENCIADOR ÚNICO ═══════════ Carvana/Cars.com/CarGurus NO tienen AI flotante visible. Carvana tiene chat botón corporate. Auttiv tiene AI Concierge con label premium "Powered by AI" y animación pulse atractiva. Posicionado bottom-right, evita choque con bottom nav mobile. */ .ae-ai-fab { position: fixed; bottom: clamp(20px, 5vw, 28px); right: clamp(16px, 4vw, 24px); z-index: 200; display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px 12px 14px; background: linear-gradient(135deg, #c2410c, #b08d57); color: #fff; border: 0; border-radius: 100px; font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: .3px; cursor: pointer; box-shadow: 0 8px 24px rgba(194,65,12,.32), 0 2px 6px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.18); transition: transform .18s cubic-bezier(.25,.1,.25,1), box-shadow .18s; user-select: none; -webkit-tap-highlight-color: transparent; } .ae-ai-fab:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(194,65,12,.45), 0 4px 10px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.18); } .ae-ai-fab:active { transform: translateY(0); } .ae-ai-fab .ae-ai-icon { position: relative; width: 28px; height: 28px; background: rgba(255,255,255,.18); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; } .ae-ai-fab .ae-ai-icon::after { /* Pulse ring premium */ content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(255,255,255,.5); animation: ae-ai-pulse 2.4s ease-out infinite; pointer-events: none; } @keyframes ae-ai-pulse { 0% { opacity: 1; transform: scale(.85); } 100% { opacity: 0; transform: scale(1.5); } } .ae-ai-fab .ae-ai-label-main { font-size: 13px; font-weight: 700; line-height: 1.1; letter-spacing: .2px; } .ae-ai-fab .ae-ai-label-sub { font-size: 9px; font-weight: 600; opacity: .8; letter-spacing: 1.2px; text-transform: uppercase; line-height: 1.1; margin-top: 2px; } .ae-ai-fab .ae-ai-text { display: flex; flex-direction: column; } /* Mobile: compactar */ @media (max-width: 480px) { .ae-ai-fab { padding: 10px 14px 10px 12px; bottom: clamp(80px, 18vw, 100px); /* sobre bottom-nav mobile */ } .ae-ai-fab .ae-ai-label-sub { display: none; } } /* Reduced motion respect */ @media (prefers-reduced-motion: reduce) { .ae-ai-fab .ae-ai-icon::after { animation: none; opacity: .3; } .ae-ai-fab:hover { transform: none; } } /* Esconder cuando el usuario está en /app (vendedor) */ .auttiv-seller-mode .ae-ai-fab { display: none !important; } /* 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 */ /* 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 . 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"] .ac-panel, [data-theme="dark"] .ac-bub, [data-theme="dark"] .ac-msg.ai .ac-bub, [data-theme="dark"] .ac-car, [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: #ff7849; } 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: 12px; 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: 12px; 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); } /* GOLD CTA — premium accent variant */ .btn-gold { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(180deg, #e4c875 0%, var(--gold) 50%, #a88a2a 100%); color: #0a0a0a; padding: 14px 26px; border-radius: 12px; font-family: inherit; font-size: 14px; font-weight: 700; letter-spacing: -0.005em; border: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.2), 0 6px 16px rgba(212,175,55,.28), 0 1px 3px rgba(0,0,0,.4); cursor: pointer; transition: all .25s var(--ease-out); } .btn-gold:hover { 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: #000; 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: #111; 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: #0A0A0A; } @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: #fcd34d; letter-spacing: -1px; margin-bottom: 4px; } .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, #1a1a1a, #0a0a0a); } @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 #1A1A1A; } .dealer-h-name { font-family: 'Bebas Neue'; font-size: 32px; letter-spacing: 2px; margin-bottom: 6px; } .dealer-h-addr { font-size: 13px; color: var(--text-tertiary); margin-bottom: 10px; } .dealer-h-stars { color: #FFD700; 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 #1A1A1A; 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; } .cond-tab.active { color: #c2410c; border-color: #c2410c; } .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: #ffffff; border: 1px solid rgba(0,0,0,.05); /* Condition-colored top stripe — instant scan when scrolling the grid. Default = slate (used). New/certified override below. */ border-top: 4px solid #475569; border-radius: 18px; overflow: hidden; cursor: pointer; position: relative; transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease; box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 4px 16px rgba(0,0,0,.04); } .car-card.cond-new { border-top-color: #16a34a; } .car-card.cond-used { border-top-color: #475569; } .car-card.cond-certified, .car-card.cond-cpo { border-top-color: #d97706; } .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); /* angel-eye premium upgrade: cards Carvana-style con hover lift + zoom suave */ transition: transform .35s cubic-bezier(.25,.1,.25,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(217, 83, 31, 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: 8px; 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); padding: 11px 14px; border-radius: 9px; font-size: 14px; 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(34,197,94,.15); color: #22C55E; 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: #bbb; 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 #1A1A1A; 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, #141414, #0a0a0a); 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: #c2410c; 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 ══════════ */