/* AMPERIA Flagship Storefront D2C — Architectural Warm Stone & Obsidian (Zero-Network CSS) */ :root { --bg-primary: #090D16; --bg-surface: #111827; --accent-electric: #00E5A3; --accent-amber: #F59E0B; --surface-gallery: #FFFFFF; --surface-stone: #F6F5F2; --surface-stone-deep: #EFECE6; --ink-obsidian: #111215; --ink-slate: #1F242D; --ink-graphite: #575B65; --ink-muted: #767B86; --accent-bronze: #8C6239; --accent-bronze-soft: rgba(140, 98, 57, 0.10); --accent-bronze-border: rgba(140, 98, 57, 0.26); --hairline: rgba(17, 18, 21, 0.08); --hairline-strong: rgba(17, 18, 21, 0.16); --shadow-soft: 0 1px 2px rgba(17, 18, 21, 0.04), 0 12px 32px rgba(17, 18, 21, 0.05); --shadow-elevated: 0 6px 18px rgba(17, 18, 21, 0.06), 0 28px 64px rgba(17, 18, 21, 0.12); --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "Helvetica Neue", Arial, sans-serif; --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-pill: 999px; }
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; max-width: 100%; overflow-x: hidden; overflow-x: clip; }
body { margin: 0; padding: 0; background-color: var(--surface-gallery); color: var(--ink-obsidian); font-family: var(--font-sans); font-size: 16px; line-height: 1.55; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; max-width: 100%; overflow-x: hidden; overflow-x: clip; }
body.is-modal-open { overflow: hidden; }
img, video, svg { max-width: 100%; }
img { height: auto; display: block; }
h1, h2 { font-family: var(--font-display); letter-spacing: -0.035em; font-weight: 600; color: var(--ink-obsidian); margin: 0; }
h3, h4 { font-family: var(--font-display); letter-spacing: -0.02em; font-weight: 600; color: var(--ink-obsidian); margin: 0; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--ink-obsidian); outline-offset: 2px; }
.nfc-section :focus-visible, .site-footer :focus-visible, .lightbox-modal :focus-visible { outline-color: #FFFFFF; }
/* Tabular & Lining Numerals across all prices, telemetry, units & metrics */ .cart-count-badge, .cart-header-subtotal, .hero-metrics-strip, .hero-price-anchor, .hero-showroom-card__specs, .hero-showroom-card__price, .hero-showroom-card__monthly, .arch-jump-pill span, .kpi-cell__val, .kpi-cell__sub, .buy-box__price, .buy-box__monthly, .config-height-range, .pack-option-btn__delta, .pack-savings-pill, .pack-option-btn__compare, .qty-stepper__val, .manual-spec-row dd, .accessory-card__price, .nfc-lcd-screen, .nfc-lcd-speed, .nfc-lcd-telemetry, .nfc-step-card__num, .comp-num, .sim-km-value, .delivery-step-card__num, .cart-summary-rows, .cart-line-item__meta, .cart-line-qty, .cart-cross-sell__info span, .checkout-summary-total, .receipt-details-grid, .lightbox-counter, .mono-code { font-variant-numeric: tabular-nums lining-nums; }
.mono-code, code { font-family: var(--font-mono); }
.container { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 28px; }
/* 1. Announcement Bar & Sticky Glass Header */ .announcement-bar { background: var(--ink-obsidian); color: #F3F1EC; font-size: 12.5px; font-weight: 500; letter-spacing: 0.015em; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.announcement-bar__inner { min-height: 36px; display: flex; align-items: center; justify-content: center; gap: 10px; padding-top: 6px; padding-bottom: 6px; text-align: center; }
.announcement-dot { width: 6px; height: 6px; border-radius: 50%; background: #C8A27A; flex-shrink: 0; }
.site-header { position: sticky; top: 0; z-index: 60; background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid var(--hairline); }
.site-header__inner { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand-logo { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand-logo__mark { width: 32px; height: 32px; border-radius: 9px; background: var(--ink-obsidian); color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; }
.brand-logo__word { font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: 0.12em; color: var(--ink-obsidian); }
.main-nav { display: flex; align-items: center; gap: 24px; }
.main-nav a { font-size: 14px; font-weight: 500; color: var(--ink-graphite); transition: color 0.18s ease; white-space: nowrap; }
.main-nav a:hover { color: var(--ink-obsidian); }
.header-tools { display: flex; align-items: center; gap: 10px; min-width: 0; }
.header-search { display: flex; align-items: center; gap: 7px; background: var(--surface-stone); border: 1px solid var(--hairline); border-radius: var(--radius-pill); padding: 6px 12px; min-width: 0; transition: border-color 0.18s ease, background-color 0.18s ease; }
.header-search:focus-within { background: #FFFFFF; border-color: var(--ink-obsidian); }
.header-search__icon { color: var(--ink-muted); flex-shrink: 0; }
.header-search__input { border: 0; background: transparent; outline: none; font-size: 13.5px; width: 148px; min-width: 0; color: var(--ink-obsidian); }
.header-search__input::placeholder { color: var(--ink-muted); }
.header-search__jump { font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--ink-obsidian); color: #FFFFFF; white-space: nowrap; flex-shrink: 0; }
.btn-header-testride { background: transparent; border: 1px solid var(--hairline-strong); color: var(--ink-obsidian); font-size: 13.5px; font-weight: 500; padding: 8px 14px; border-radius: var(--radius-pill); white-space: nowrap; transition: background-color 0.18s ease, border-color 0.18s ease; }
.btn-header-testride:hover { background: var(--surface-stone); border-color: var(--ink-obsidian); }
.cart-toggle-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--ink-obsidian); color: #FFFFFF; border: 1px solid var(--ink-obsidian); border-radius: var(--radius-pill); padding: 8px 14px; font-size: 13.5px; font-weight: 500; white-space: nowrap; transition: background-color 0.18s ease, transform 0.18s ease; }
.cart-toggle-btn:hover { background: var(--ink-slate); }
.cart-count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.18); color: #FFFFFF; font-size: 12px; font-weight: 600; }
.cart-header-subtotal { font-size: 13px; font-weight: 600; padding-left: 6px; border-left: 1px solid rgba(255, 255, 255, 0.18); transition: opacity 0.18s ease; }
.cart-header-subtotal.is-zero { opacity: 0.45; font-weight: 400; }
.mobile-menu-btn { display: none; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--radius-pill); border: 1px solid var(--hairline-strong); background: #FFFFFF; color: var(--ink-obsidian); flex-shrink: 0; }
.mobile-nav-drawer { position: fixed; top: 70px; left: 0; right: 0; z-index: 59; max-height: calc(100vh - 70px); overflow-y: auto; background: #FFFFFF; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline-strong); box-shadow: var(--shadow-elevated); }
.mobile-nav-drawer__inner { padding-top: 20px; padding-bottom: 24px; display: grid; gap: 20px; }
.mobile-nav-drawer__kicker { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-bronze); margin-bottom: 6px; }
.mobile-nav-drawer__models { display: grid; gap: 8px; }
.mobile-nav-drawer__models a { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-stone); font-size: 14px; }
.mobile-nav-drawer__models a span { color: var(--ink-graphite); font-size: 13px; }
.mobile-nav-drawer__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; padding-top: 12px; border-top: 1px solid var(--hairline); }
.mobile-nav-drawer__links a { font-size: 14px; font-weight: 500; color: var(--ink-graphite); padding: 4px 0; }
.mobile-nav-drawer__cta { width: 100%; }
/* Shared Section Rhythm & Typography */ .store-section { padding: clamp(64px, 7vw, 112px) 0; background: var(--surface-gallery); }
.store-section--alt { background: var(--surface-stone); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.section-header { max-width: 720px; margin-bottom: clamp(36px, 4.5vw, 56px); }
.section-header--split { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.section-header--split > div { max-width: 640px; }
.section-kicker, .eyebrow-pill { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent-bronze); margin-bottom: 12px; }
.eyebrow-pill { padding: 6px 12px; border-radius: var(--radius-pill); background: var(--surface-stone); border: 1px solid var(--hairline); color: var(--ink-slate); }
.section-title { font-size: clamp(1.85rem, 3.2vw, 2.75rem); line-height: 1.08; margin-bottom: 14px; }
.section-subtitle { font-size: 16.5px; line-height: 1.6; color: var(--ink-graphite); }
/* 2. Hero Flagship Cinematográfico */ .hero-section { padding: clamp(40px, 5vw, 76px) 0 clamp(64px, 7vw, 104px); background: linear-gradient(180deg, var(--surface-stone) 0%, #FFFFFF 58%); border-bottom: 1px solid var(--hairline); }
.hero-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.16fr); gap: clamp(32px, 4.5vw, 64px); align-items: center; }
.hero-title { font-size: clamp(2.35rem, 4.3vw, 3.8rem); line-height: 1.03; margin-bottom: 20px; }
.hero-lead { font-size: clamp(1rem, 1.25vw, 1.14rem); line-height: 1.62; color: var(--ink-graphite); margin-bottom: 24px; }
.hero-lead strong { color: var(--ink-obsidian); font-weight: 600; }
.hero-metrics-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); font-size: 13.5px; font-weight: 500; color: var(--ink-slate); margin-bottom: 20px; }
.hero-metric-dot, .hero-price-sep { color: var(--ink-muted); }
.hero-price-anchor { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 10px; font-size: 15px; color: var(--ink-graphite); margin-bottom: 28px; }
.hero-price-anchor strong { color: var(--ink-obsidian); font-size: 19px; font-weight: 600; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-hero-primary, .btn-cta-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 13px 26px; border-radius: var(--radius-pill); border: 1px solid var(--ink-obsidian); background: var(--ink-obsidian); color: #FFFFFF; font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; transition: background-color 0.18s ease, transform 0.18s ease; }
.btn-hero-primary:hover, .btn-cta-primary:hover { background: var(--ink-slate); }
.btn-cta-primary--full { width: 100%; }
.btn-hero-secondary, .btn-cta-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 12px 22px; border-radius: var(--radius-pill); border: 1px solid var(--hairline-strong); background: #FFFFFF; color: var(--ink-obsidian); font-size: 14px; font-weight: 500; transition: border-color 0.18s ease, background-color 0.18s ease; }
.btn-hero-secondary:hover, .btn-cta-secondary:hover { border-color: var(--ink-obsidian); background: var(--surface-stone); }
.btn-cta-ghost { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 18px; border-radius: var(--radius-pill); border: 1px solid var(--hairline); background: transparent; color: var(--ink-graphite); font-size: 13.5px; font-weight: 500; transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease; }
.btn-cta-ghost:hover { color: var(--ink-obsidian); border-color: var(--hairline-strong); background: var(--surface-stone); }
.hero-stage-stack { display: grid; gap: 14px; min-width: 0; }
.hero-media-card { border-radius: var(--radius-lg); overflow: hidden; background: var(--ink-obsidian); box-shadow: var(--shadow-elevated); aspect-ratio: 16 / 9; }
.hero-reel-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-campaign-panel { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 16px; align-items: center; padding: 12px 16px; border-radius: var(--radius-md); background: var(--surface-stone); border: 1px solid var(--hairline); }
.hero-campaign-panel img { width: 124px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-sm); }
.hero-campaign-panel__copy { display: grid; gap: 2px; min-width: 0; }
.hero-campaign-panel__kicker { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-bronze); }
.hero-campaign-panel__copy strong { font-size: 14px; font-weight: 600; color: var(--ink-obsidian); }
.hero-campaign-panel__copy span:last-child { font-size: 12.5px; color: var(--ink-graphite); }
.trust-pillars { margin-top: clamp(36px, 4.5vw, 56px); padding: 26px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.trust-pillar { display: flex; align-items: flex-start; gap: 12px; }
.trust-pillar svg { color: var(--accent-bronze); flex-shrink: 0; margin-top: 2px; }
.trust-pillar strong { display: block; font-size: 14px; font-weight: 600; color: var(--ink-obsidian); margin-bottom: 2px; }
.trust-pillar span { display: block; font-size: 13px; color: var(--ink-graphite); }
.hero-showroom-header { margin-top: clamp(36px, 4.5vw, 52px); margin-bottom: 20px; display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.hero-showroom-header .section-kicker { margin-bottom: 0; }
.hero-showroom-caption { font-size: 14px; color: var(--ink-graphite); }
.hero-quick-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.hero-showroom-card { display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: 20px; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; }
.hero-showroom-card:hover { border-color: var(--ink-obsidian); box-shadow: var(--shadow-soft); transform: translateY(-2px); }
.hero-showroom-card__media { aspect-ratio: 4 / 3; background: #FFFFFF; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; overflow: hidden; }
.hero-showroom-card__media img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.hero-showroom-card__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.hero-showroom-card__name { font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: -0.025em; }
.hero-showroom-card__wheel { font-size: 12px; font-weight: 500; color: var(--ink-graphite); background: var(--surface-stone); padding: 3px 9px; border-radius: var(--radius-pill); }
.hero-showroom-card__platform { display: block; font-size: 12.5px; color: var(--ink-muted); margin-top: 2px; margin-bottom: 12px; }
.hero-showroom-card__specs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-graphite); padding-top: 12px; border-top: 1px solid var(--hairline); margin-bottom: 12px; }
.hero-showroom-card__price-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: auto; }
.hero-showroom-card__price { font-size: 18px; font-weight: 600; }
.hero-showroom-card__monthly { font-size: 12.5px; color: var(--ink-graphite); }
/* 3. Fichas Configuradoras Flagship (#modelos) */ .arch-jump-bar { display: flex; flex-wrap: wrap; gap: 10px; }
.arch-jump-pill { display: inline-flex; align-items: center; gap: 10px; padding: 9px 15px; border-radius: var(--radius-pill); background: var(--surface-stone); border: 1px solid var(--hairline); font-size: 13px; transition: border-color 0.18s ease, background-color 0.18s ease; }
.arch-jump-pill strong { font-weight: 600; color: var(--ink-obsidian); }
.arch-jump-pill span { color: var(--ink-graphite); }
.arch-jump-pill:hover { background: #FFFFFF; border-color: var(--ink-obsidian); }
.search-status-note { padding: 14px 18px; border-radius: var(--radius-md); background: var(--surface-stone); border: 1px solid var(--hairline-strong); font-size: 14px; color: var(--ink-obsidian); margin-bottom: 28px; }
.models-stack { display: grid; gap: 0; }
.model-card { display: grid; grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr); gap: clamp(32px, 4.5vw, 64px); align-items: start; padding: clamp(48px, 6vw, 84px) 0; border-top: 1px solid var(--hairline); }
.model-card:last-child { border-bottom: 1px solid var(--hairline); }
/* Sticky Left Gallery on Desktop (>1024px) */ .model-gallery-col { position: sticky; top: 92px; align-self: start; min-width: 0; }
.buy-box { position: static; min-width: 0; }
.media-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.media-view-tabs { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: var(--radius-pill); background: var(--surface-stone); border: 1px solid var(--hairline); }
.media-tab-btn { border: 0; background: transparent; padding: 7px 14px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 500; color: var(--ink-graphite); transition: background-color 0.18s ease, color 0.18s ease; }
.media-tab-btn.is-active { background: #FFFFFF; color: var(--ink-obsidian); box-shadow: 0 1px 3px rgba(17, 18, 21, 0.08); }
.btn-lightbox-trigger { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: var(--radius-pill); border: 1px solid var(--hairline); background: #FFFFFF; font-size: 12.5px; font-weight: 500; color: var(--ink-graphite); transition: border-color 0.18s ease, color 0.18s ease; }
.btn-lightbox-trigger:hover { border-color: var(--ink-obsidian); color: var(--ink-obsidian); }
/* Unified 4:3 Stage Across Studio / Reel / Lifestyle (Zero CLS) */ .unified-media-stage { width: 100%; aspect-ratio: 4 / 3; background: #FFFFFF; border: 1px solid var(--hairline); border-radius: var(--radius-lg); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.main-angle-image { width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; }
.studio-reel-video, .lifestyle-editorial-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.main-angle-caption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; padding: 12px 2px; font-size: 13px; }
.main-angle-label { font-weight: 600; color: var(--ink-obsidian); }
.main-angle-desc { color: var(--ink-graphite); font-size: 12.5px; }
.thumb-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.thumb-btn { padding: 4px; background: #FFFFFF; border: 1px solid var(--hairline); border-radius: var(--radius-sm); aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; overflow: hidden; transition: border-color 0.18s ease; }
.thumb-btn img { width: 100%; height: 100%; object-fit: contain; }
.thumb-btn:hover { border-color: var(--hairline-strong); }
.thumb-btn.is-active { border-color: var(--ink-obsidian); box-shadow: inset 0 0 0 1px var(--ink-obsidian); }
/* Horizontal Stylized 9:16 Road Test Card */ .road-test-card { margin-top: 20px; display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 20px; align-items: center; padding: 16px; border-radius: var(--radius-md); background: var(--surface-stone); border: 1px solid var(--hairline); }
.road-test-card__video-wrap { width: 136px; aspect-ratio: 9 / 16; border-radius: 10px; overflow: hidden; background: var(--ink-obsidian); flex-shrink: 0; }
.amperia-video--vertical { width: 100%; height: 100%; object-fit: cover; display: block; }
.road-test-card__content { min-width: 0; }
.road-test-card__eyebrow { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-bronze); margin-bottom: 4px; }
.road-test-card__title { font-size: 15.5px; line-height: 1.25; margin-bottom: 6px; }
.road-test-card__desc { font-size: 13px; color: var(--ink-graphite); margin-bottom: 10px; }
.road-test-card__highlights { margin: 0; padding-left: 16px; font-size: 12.5px; color: var(--ink-slate); display: grid; gap: 3px; }
/* Buy-Box Editorial Layout */ .buy-box__meta-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.buy-box__series { font-size: 12px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-muted); }
.stock-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--surface-stone); border: 1px solid var(--hairline); font-size: 12px; font-weight: 500; color: var(--ink-slate); }
.stock-pill__dot { width: 6px; height: 6px; border-radius: 50%; background: #3B6E52; }
.buy-box__heading { margin-bottom: 12px; }
.buy-box__title { font-size: clamp(1.9rem, 2.8vw, 2.5rem); line-height: 1.06; letter-spacing: -0.035em; }
.buy-box__platform { display: block; font-size: 13px; color: var(--ink-muted); margin-top: 4px; }
.buy-box__tagline { font-size: 15px; line-height: 1.6; color: var(--ink-graphite); margin-bottom: 22px; }
.buy-box__kpi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 24px; }
.kpi-cell { background: var(--surface-stone); padding: 13px 15px; display: flex; flex-direction: column; gap: 2px; }
.kpi-cell__label { font-size: 11.5px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.kpi-cell__val { font-size: 15px; font-weight: 600; color: var(--ink-obsidian); }
.kpi-cell__sub { font-size: 12px; color: var(--ink-graphite); }
.buy-box__pricing { padding: 18px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); margin-bottom: 22px; }
.buy-box__price-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.buy-box__price { font-family: var(--font-display); font-size: 32px; font-weight: 600; letter-spacing: -0.03em; color: var(--ink-obsidian); }
.buy-box__tax-note { font-size: 12.5px; color: var(--ink-muted); }
.buy-box__monthly { margin-top: 4px; font-size: 13.5px; color: var(--ink-graphite); }
.buy-box__monthly strong { color: var(--ink-obsidian); font-weight: 600; }
.config-block { margin-bottom: 20px; }
.config-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 9px; }
.config-label { font-size: 13px; font-weight: 600; color: var(--ink-obsidian); }
.config-height-range, .config-selected-hint { font-size: 12.5px; color: var(--ink-graphite); }
.size-pills-row, .swatches-row { display: flex; flex-wrap: wrap; gap: 8px; }
.size-pill, .swatch-pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: var(--radius-pill); border: 1px solid var(--hairline-strong); background: #FFFFFF; font-size: 13.5px; font-weight: 500; color: var(--ink-obsidian); transition: border-color 0.16s ease, background-color 0.16s ease; }
.size-pill.is-selected, .swatch-pill.is-selected { border-color: var(--ink-obsidian); background: var(--surface-stone); box-shadow: inset 0 0 0 1px var(--ink-obsidian); }
.swatch-dot { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(17, 18, 21, 0.22); flex-shrink: 0; }
/* Realistic dual finish Satin Black + Saddle Brown Leather on Amperia Urbana */ .swatch-dot--dual-tan { background: linear-gradient(135deg, #18181B 0%, #18181B 52%, #8C5832 52%, #8C5832 100%) !important; }
.packs-stack { display: grid; gap: 10px; }
.pack-option-btn { width: 100%; text-align: left; padding: 14px 16px; border-radius: var(--radius-md); border: 1px solid var(--hairline-strong); background: #FFFFFF; display: grid; gap: 4px; transition: border-color 0.16s ease, background-color 0.16s ease; }
.pack-option-btn.is-selected { border-color: var(--ink-obsidian); background: var(--surface-stone); box-shadow: inset 0 0 0 1px var(--ink-obsidian); }
.pack-option-btn__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pack-option-btn__title-group { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.pack-option-btn__top strong { font-size: 14px; font-weight: 600; }
.pack-savings-pill { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--accent-bronze-soft); border: 1px solid var(--accent-bronze-border); color: var(--accent-bronze); font-size: 11.5px; font-weight: 600; }
.pack-option-btn__delta { font-size: 13.5px; font-weight: 600; color: var(--ink-obsidian); white-space: nowrap; }
.pack-option-btn__desc { font-size: 12.5px; color: var(--ink-graphite); }
.pack-option-btn__compare { font-size: 11.5px; color: var(--ink-muted); }
.buy-box__purchase-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; margin-top: 22px; margin-bottom: 10px; }
.qty-stepper { display: inline-flex; align-items: center; border: 1px solid var(--hairline-strong); border-radius: var(--radius-pill); background: #FFFFFF; min-height: 50px; padding: 0 6px; }
.qty-stepper__btn { width: 34px; height: 36px; border: 0; background: transparent; font-size: 17px; color: var(--ink-obsidian); border-radius: 50%; }
.qty-stepper__btn:hover { background: var(--surface-stone); }
.qty-stepper__val { min-width: 26px; text-align: center; font-size: 14.5px; font-weight: 600; }
.buy-box__secondary-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.buy-box__secondary-actions .btn-cta-secondary, .buy-box__secondary-actions .btn-cta-ghost { min-height: 44px; padding: 9px 14px; font-size: 13.5px; }
.buy-box__doc-row { margin-bottom: 18px; }
.btn-manual-pdf { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--surface-stone); border: 1px solid var(--hairline); font-size: 13px; font-weight: 500; color: var(--ink-slate); transition: border-color 0.16s ease, color 0.16s ease; }
.btn-manual-pdf:hover { border-color: var(--ink-obsidian); color: var(--ink-obsidian); }
.buy-box__perks { margin: 0 0 20px; padding: 0; list-style: none; display: grid; gap: 7px; font-size: 13px; color: var(--ink-graphite); }
.buy-box__perks li { position: relative; padding-left: 16px; }
.buy-box__perks li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-bronze); }
/* Clean Accordions with + / − Icon */ .buy-box__accordions { border-top: 1px solid var(--hairline); }
.spec-accordion, .faq-item { border-bottom: 1px solid var(--hairline); }
.spec-accordion summary, .faq-item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 0; font-size: 14px; font-weight: 600; color: var(--ink-obsidian); cursor: pointer; }
.spec-accordion summary::-webkit-details-marker, .faq-item summary::-webkit-details-marker { display: none; }
.spec-accordion__icon { width: 24px; height: 24px; border-radius: 50%; background: var(--surface-stone); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--font-mono); font-size: 15px; font-weight: 400; color: var(--ink-obsidian); }
.spec-accordion__icon::before { content: "+"; }
details[open] > summary .spec-accordion__icon::before { content: "−"; }
.spec-accordion__body, .faq-item__body { padding-bottom: 18px; font-size: 13.5px; line-height: 1.6; color: var(--ink-graphite); }
.manual-spec-table { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--hairline); }
.manual-spec-row { display: grid; grid-template-columns: minmax(125px, 42%) minmax(0, 1fr); gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--hairline); font-size: 13px; }
.manual-spec-row dt { color: var(--ink-muted); font-weight: 500; }
.manual-spec-row dd { margin: 0; color: var(--ink-obsidian); font-weight: 500; }
.box-preassembled-note { margin-bottom: 10px; color: var(--ink-slate); }
.box-contents-list { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
/* Sober Catalog Verification Notes (Zero harsh yellow alerts) */ .specs-list { display: grid; gap: 10px; }
.spec-row { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-stone); border: 1px solid var(--hairline); }
.spec-row__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 4px; }
.spec-label { font-size: 12.5px; font-weight: 600; color: var(--ink-obsidian); }
.spec-badge { font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: var(--radius-pill); }
.spec-badge--verified { background: #EAE8E3; color: var(--ink-slate); }
.spec-badge--provisional { background: #EFECE6; color: var(--ink-graphite); border: 1px solid var(--hairline); }
.spec-value { font-size: 13px; color: var(--ink-slate); }
.spec-note { margin-top: 3px; font-size: 11.5px; color: var(--ink-muted); }
/* 4. Equipamiento Oficial (#accesorios) */ .accessories-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.accessory-card { background: #FFFFFF; border: 1px solid var(--hairline); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.accessory-card:hover { border-color: var(--hairline-strong); box-shadow: var(--shadow-soft); }
.accessory-card__media { aspect-ratio: 4 / 3; background: #FFFFFF; padding: 18px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--hairline); }
.accessory-card__media img { width: 100%; height: 100%; object-fit: contain; }
.accessory-card__body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.accessory-card__cat { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--accent-bronze); margin-bottom: 6px; }
.accessory-card__title { font-size: 17px; line-height: 1.25; margin-bottom: 8px; }
.accessory-card__desc { font-size: 13.5px; color: var(--ink-graphite); margin-bottom: 14px; }
.accessory-card__compat { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; margin-bottom: 16px; }
.compat-pill { font-size: 11.5px; color: var(--ink-graphite); background: var(--surface-stone); padding: 3px 9px; border-radius: var(--radius-pill); }
.accessory-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 14px; border-top: 1px solid var(--hairline); }
.accessory-card__price { font-size: 18px; font-weight: 600; color: var(--ink-obsidian); }
.btn-accessory-add { padding: 9px 15px; border-radius: var(--radius-pill); border: 1px solid var(--ink-obsidian); background: var(--ink-obsidian); color: #FFFFFF; font-size: 13px; font-weight: 500; transition: background-color 0.16s ease; }
.btn-accessory-add:hover { background: var(--ink-slate); }
/* 5. Ingeniería #nfc-ignition — Cockpit Digital Interactivo SL-P6 */ .nfc-section { padding: clamp(72px, 8vw, 120px) 0; background: var(--bg-primary); color: #F4F5F7; }
.nfc-header { max-width: 720px; margin-bottom: clamp(36px, 4.5vw, 56px); }
.nfc-kicker { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-electric); margin-bottom: 12px; }
.nfc-title { color: #FFFFFF; font-size: clamp(1.9rem, 3.3vw, 2.85rem); line-height: 1.08; margin-bottom: 14px; }
.nfc-subtitle { font-size: 16.5px; line-height: 1.6; color: #A6AEBC; }
.nfc-pro-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(28px, 4vw, 52px); align-items: start; }
.nfc-visual-stack, .nfc-interactive-col { display: grid; gap: 20px; min-width: 0; }
.nfc-macro-frame, .nfc-video-card { border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-surface); border: 1px solid rgba(255, 255, 255, 0.09); }
.nfc-macro-frame img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.nfc-video-card__head { padding: 12px 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; color: #B4BCC9; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.spec-badge--verified-dark { background: rgba(255, 255, 255, 0.1); color: #E6E9EF; }
.amperia-video--horizontal { width: 100%; aspect-ratio: 16 / 9; display: block; background: #05070C; }
.nfc-simulator-card { background: var(--bg-surface); border: 1px solid rgba(255, 255, 255, 0.11); border-radius: var(--radius-lg); padding: 24px; }
.nfc-simulator-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.nfc-model-chip { font-family: var(--font-mono); font-size: 12px; color: #D0D6E0; letter-spacing: 0.04em; }
.nfc-status-pill { font-family: var(--font-mono); font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: var(--radius-pill); letter-spacing: 0.05em; }
.nfc-status-pill--locked { background: rgba(255, 255, 255, 0.08); color: #CBD2DF; }
.nfc-status-pill--unlocked { background: rgba(0, 229, 163, 0.14); color: var(--accent-electric); border: 1px solid rgba(0, 229, 163, 0.35); }
.nfc-lcd-screen { background: #05080F; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--radius-md); padding: 20px; font-family: var(--font-mono); margin-bottom: 16px; transition: border-color 0.22s ease, box-shadow 0.22s ease; }
.nfc-lcd-screen--unlocked { border-color: rgba(0, 229, 163, 0.55); box-shadow: 0 0 28px rgba(0, 229, 163, 0.12); }
.nfc-lcd-hud-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 11.5px; color: #8E97A8; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.nfc-lcd-volt { display: inline-flex; align-items: center; gap: 6px; color: #D8DEE9; }
.nfc-batt-bars { display: inline-flex; gap: 2px; }
.nfc-batt-bars i { width: 4px; height: 10px; border-radius: 1px; background: rgba(255, 255, 255, 0.22); }
.nfc-lcd-screen--unlocked .nfc-batt-bars i { background: var(--accent-electric); }
.nfc-lcd-status-icon { display: inline-flex; align-items: center; gap: 6px; color: #CBD2DF; }
.nfc-lcd-screen--unlocked .nfc-lcd-status-icon { color: var(--accent-electric); }
.nfc-lcd-pas-chip { padding: 2px 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); color: #FFFFFF; font-weight: 600; }
.nfc-lcd-screen--unlocked .nfc-lcd-pas-chip { background: rgba(0, 229, 163, 0.16); color: var(--accent-electric); }
.nfc-lcd-speed { font-size: clamp(2.2rem, 3.6vw, 3rem); font-weight: 700; color: #FFFFFF; letter-spacing: -0.02em; padding: 16px 0 10px; line-height: 1; }
.nfc-lcd-screen--unlocked .nfc-lcd-speed { color: var(--accent-electric); }
.nfc-lcd-speed small { font-size: 14px; font-weight: 500; color: #9AA3B4; }
.nfc-lcd-telemetry-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; color: #D8DEE9; padding: 8px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.nfc-lcd-epac { color: #8E97A8; font-size: 11.5px; }
.nfc-lcd-sub { font-family: var(--font-sans); font-size: 12.5px; color: #9AA3B4; margin-top: 6px; }
.nfc-hardware-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.hw-key { height: 44px; border-radius: var(--radius-sm); border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.04); color: #FFFFFF; font-family: var(--font-mono); font-size: 15px; font-weight: 600; transition: background-color 0.16s ease, border-color 0.16s ease, transform 0.1s ease; }
.hw-key:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.34); }
.hw-key:active { transform: scale(0.98); }
.nfc-simulator-card[data-nfc-state="unlocked"] .hw-key { border-color: rgba(0, 229, 163, 0.38); }
.btn-nfc-toggle { width: 100%; min-height: 48px; padding: 12px 20px; border-radius: var(--radius-pill); border: 1px solid var(--accent-electric); background: var(--accent-electric); color: #06110D; font-size: 14px; font-weight: 600; transition: opacity 0.16s ease; }
.btn-nfc-toggle:hover { opacity: 0.92; }
.nfc-steps-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.nfc-step-card { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 14px 16px; border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); }
.nfc-step-card__num { font-family: var(--font-mono); font-size: 12.5px; color: var(--accent-electric); font-weight: 600; }
.nfc-step-card strong { display: block; font-size: 14px; color: #FFFFFF; margin-bottom: 3px; }
.nfc-step-card p { font-size: 13px; color: #A6AEBC; }
.nfc-cockpit-preview { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px; border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); }
.nfc-cockpit-preview img { width: 112px; aspect-ratio: 4 / 3; object-fit: contain; background: #FFFFFF; border-radius: var(--radius-sm); padding: 4px; }
.nfc-cockpit-preview p { font-size: 13px; color: #B4BCC9; }
.nfc-manual-specs { padding: 18px 20px; border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); }
.nfc-manual-specs__title { color: #FFFFFF; font-size: 14.5px; margin-bottom: 10px; }
.nfc-manual-specs__list { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13px; color: #B4BCC9; }
.nfc-manual-specs__list strong { color: #FFFFFF; }
/* 6. Lookbook Editorial 16:9 & Estudio Blanco Filtrable 3-Col (#galeria-angulos) */ .editorial-trio-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-bottom: 44px; }
.editorial-card { margin: 0; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--hairline); background: var(--surface-stone); }
.editorial-card__media { aspect-ratio: 16 / 9; overflow: hidden; }
.editorial-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.editorial-card:hover .editorial-card__media img { transform: scale(1.02); }
.editorial-card__caption { padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.editorial-card__caption strong { display: block; font-size: 16px; color: var(--ink-obsidian); }
.editorial-card__caption span { font-size: 12.5px; color: var(--ink-graphite); }
.editorial-card__link { font-size: 13px; font-weight: 600; color: var(--ink-obsidian); white-space: nowrap; }
.lookbook-subheader { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.lookbook-filter-bar, .filter-bar { display: flex; flex-wrap: wrap; gap: 8px; }
.lookbook-filter-btn, .filter-pill { padding: 9px 16px; border-radius: var(--radius-pill); border: 1px solid var(--hairline-strong); background: #FFFFFF; font-size: 13.5px; font-weight: 500; color: var(--ink-graphite); transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease; }
.lookbook-filter-btn.is-active, .filter-pill.is-active { background: var(--ink-obsidian); border-color: var(--ink-obsidian); color: #FFFFFF; }
.lookbook-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.lookbook-tile { margin: 0; background: #FFFFFF; border: 1px solid var(--hairline); border-radius: var(--radius-md); overflow: hidden; transition: border-color 0.18s ease, box-shadow 0.18s ease; }
.lookbook-tile:hover { border-color: var(--hairline-strong); box-shadow: var(--shadow-soft); }
.lookbook-tile__btn { width: 100%; aspect-ratio: 4 / 3; padding: 16px; border: 0; background: #FFFFFF; display: flex; align-items: center; justify-content: center; cursor: zoom-in; }
.lookbook-tile__btn img { width: 100%; height: 100%; object-fit: contain; }
.lookbook-tile__caption { padding: 12px 16px; border-top: 1px solid var(--hairline); display: flex; align-items: baseline; justify-content: space-between; gap: 10px; background: var(--surface-stone); }
.lookbook-tile__caption strong { font-size: 13.5px; font-weight: 600; color: var(--ink-obsidian); }
.lookbook-tile__caption span { font-size: 12px; color: var(--ink-graphite); text-align: right; }
/* 7. Comparador Escaneable (#comparador) & Planificador (#simulador-autonomia) */ .comparator-rec { margin: 18px 0 24px; padding: 14px 18px; border-radius: var(--radius-md); background: #FFFFFF; border: 1px solid var(--hairline); font-size: 14px; color: var(--ink-slate); }
.comparator-table-wrap { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; background: #FFFFFF; border: 1px solid var(--hairline); border-radius: var(--radius-lg); }
.comparator-table { width: 100%; min-width: 880px; border-collapse: collapse; text-align: left; font-size: 13.5px; }
.comparator-table th { padding: 16px 18px; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-muted); background: var(--surface-stone); border-bottom: 1px solid var(--hairline); white-space: nowrap; }
.comparator-table td { padding: 18px; border-bottom: 1px solid var(--hairline); vertical-align: middle; }
.comparator-table tbody tr:last-child td { border-bottom: 0; }
.comp-model-cell { display: flex; align-items: center; gap: 14px; }
.comp-model-cell img { width: 84px; height: 63px; object-fit: contain; background: #FFFFFF; border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 4px; flex-shrink: 0; }
.comp-model-name { display: block; font-size: 15px; font-weight: 600; color: var(--ink-obsidian); }
.comp-sub { display: block; font-size: 12px; color: var(--ink-graphite); margin-top: 2px; }
.btn-comp-buy { padding: 8px 16px; border-radius: var(--radius-pill); border: 1px solid var(--ink-obsidian); background: var(--ink-obsidian); color: #FFFFFF; font-size: 13px; font-weight: 500; white-space: nowrap; }
.btn-comp-buy:hover { background: var(--ink-slate); }
.simulator-card { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(28px, 4vw, 56px); padding: clamp(28px, 4vw, 48px); border-radius: var(--radius-lg); background: var(--surface-stone); border: 1px solid var(--hairline); align-items: center; }
.simulator-card__controls .section-subtitle { margin-bottom: 24px; }
.sim-field { margin-bottom: 18px; }
.sim-field .config-label { display: block; margin-bottom: 8px; }
.sim-select { width: 100%; min-height: 46px; padding: 10px 14px; border-radius: var(--radius-sm); border: 1px solid var(--hairline-strong); background: #FFFFFF; font-size: 14px; color: var(--ink-obsidian); }
.sim-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.sim-mode-btn, .sim-months-btn { padding: 9px 15px; border-radius: var(--radius-pill); border: 1px solid var(--hairline-strong); background: #FFFFFF; font-size: 13px; font-weight: 500; color: var(--ink-graphite); }
.sim-mode-btn.is-active, .sim-months-btn.is-active { background: var(--ink-obsidian); border-color: var(--ink-obsidian); color: #FFFFFF; }
.simulator-card__result { background: #FFFFFF; border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 36px); box-shadow: var(--shadow-soft); }
.sim-metrics-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--hairline); margin-bottom: 20px; }
.sim-metric-box__label { display: block; font-size: 12px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
.sim-metric-box__big { display: flex; align-items: baseline; gap: 6px; }
.sim-km-value { font-family: var(--font-display); font-size: clamp(2.1rem, 3.4vw, 2.85rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: var(--ink-obsidian); }
.sim-km-unit { font-size: 15px; font-weight: 500; color: var(--ink-graphite); }
.sim-visual-meter { margin-bottom: 18px; }
.sim-visual-meter__head { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-graphite); margin-bottom: 8px; }
.sim-visual-meter__track { height: 8px; border-radius: var(--radius-pill); background: var(--surface-stone-deep); overflow: hidden; }
.sim-visual-meter__fill { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--ink-obsidian); transition: width 0.25s ease; }
.sim-caption { font-size: 12.5px; color: var(--ink-muted); margin-bottom: 20px; }
/* 8. Entrega al 95% (#entrega-garantia) & Showroom Barcelona + FAQ (#showroom-barcelona) */ .delivery-steps-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.delivery-step-card { background: #FFFFFF; border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: 28px; }
.delivery-step-card__num { display: inline-block; font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--accent-bronze); margin-bottom: 14px; }
.delivery-step-card h3 { font-size: 19px; margin-bottom: 10px; }
.delivery-step-card p { font-size: 14.5px; color: var(--ink-graphite); }
.showroom-faq-grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.showroom-editorial-box__lead { font-size: 15.5px; color: var(--ink-graphite); margin-bottom: 24px; }
.showroom-address-card { background: var(--surface-stone); border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: 20px 22px; display: grid; gap: 14px; margin-bottom: 24px; }
.showroom-address-card__row { display: grid; gap: 2px; }
.showroom-address-card__label { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-muted); }
.showroom-address-card__row strong, .showroom-email-link { font-size: 14.5px; font-weight: 600; color: var(--ink-obsidian); }
.showroom-email-link { text-decoration: underline; text-underline-offset: 3px; }
.faq-column__title { font-size: clamp(1.45rem, 2.3vw, 1.9rem); margin-bottom: 18px; }
.faq-list { border-top: 1px solid var(--hairline); }
/* 9. Footer Corporativo Europeo Consolidado (Zero Neon Links) */ .site-footer { background: var(--ink-obsidian); color: #D5D3CD; padding: clamp(56px, 6vw, 88px) 0 40px; }
.site-footer__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.site-footer__logo-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.site-footer__mark { width: 28px; height: 28px; border-radius: 7px; background: rgba(255, 255, 255, 0.1); color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; }
.site-footer__logo { font-family: var(--font-display); font-size: 16px; letter-spacing: 0.04em; color: #FFFFFF; }
.site-footer__address { font-size: 13.5px; color: #B4B2AC; margin-bottom: 12px; }
.site-footer__address a, .site-footer__col a { color: #E5E3DD; transition: color 0.16s ease; }
.site-footer__address a:hover, .site-footer__col a:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }
.site-footer__legal { font-size: 12px; line-height: 1.6; color: #8E8D88; }
.site-footer__legal strong { color: #C7C5BF; }
.site-footer__col h4 { color: #FFFFFF; font-size: 13px; text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 14px; }
.site-footer__col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; font-size: 13.5px; color: #A8A6A0; }
.footer-sep { color: #666560; margin: 0 4px; }
.footer-pdf-link { font-size: 12.5px; color: #C8A27A !important; }
.site-footer__bottom { padding-top: 26px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.footer-certs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 12px; color: #9E9C96; }
.footer-certs__codes, .footer-certs__epac { font-family: var(--font-mono); padding: 3px 9px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.06); color: #DCDAD4; }
.footer-payments { display: flex; flex-wrap: wrap; gap: 8px; }
.payment-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--radius-pill); border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04); font-size: 12px; color: #DCDAD4; }
/* 10. Cart Drawer with Cross-Sell, Checkout/TestRide Modals & Lightbox */ .cart-drawer-shell { position: fixed; inset: 0; z-index: 90; pointer-events: none; visibility: hidden; overflow: hidden; }
.cart-drawer-shell[data-drawer-open="true"] { pointer-events: auto; visibility: visible; }
.cart-drawer-backdrop, .store-modal__backdrop, .lightbox-backdrop { position: fixed; inset: 0; background: rgba(17, 18, 21, 0.48); backdrop-filter: blur(4px); }
.cart-drawer-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 100vw); background: #FFFFFF; box-shadow: var(--shadow-elevated); display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.24s ease; z-index: 1; }
.cart-drawer-shell[data-drawer-open="true"] .cart-drawer-panel { transform: translateX(0); }
.cart-drawer__header, .store-modal__header { padding: 20px 24px; border-bottom: 1px solid var(--hairline); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cart-drawer__title, .store-modal__title { font-size: 20px; }
.cart-drawer__sub { font-size: 12.5px; color: var(--ink-muted); }
.icon-close-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--hairline); background: var(--surface-stone); color: var(--ink-obsidian); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.cart-shipping-banner { padding: 12px 24px; background: var(--surface-stone); border-bottom: 1px solid var(--hairline); }
.cart-shipping-banner__text { font-size: 12.5px; font-weight: 500; color: var(--ink-slate); margin-bottom: 6px; }
.cart-shipping-bar { height: 4px; border-radius: var(--radius-pill); background: var(--surface-stone-deep); overflow: hidden; }
.cart-shipping-bar span { display: block; height: 100%; background: var(--ink-obsidian); transition: width 0.22s ease; }
.cart-ceiling-alert, .form-error-banner { margin: 12px 24px 0; padding: 12px 14px; border-radius: var(--radius-sm); background: #FAF3EB; border: 1px solid var(--accent-bronze-border); color: #5C3B1E; font-size: 12.5px; line-height: 1.45; }
.form-error-banner { margin: 0 0 12px; }
.cart-items-list { padding: 18px 24px; overflow-y: auto; flex: 1; display: grid; align-content: start; gap: 14px; }
.cart-empty-state { padding: 28px 16px; text-align: center; background: var(--surface-stone); border-radius: var(--radius-md); }
.cart-empty-msg { font-size: 14px; color: var(--ink-graphite); margin-bottom: 10px; }
.cart-empty-link { display: inline-block; font-size: 13.5px; font-weight: 600; color: var(--ink-obsidian); text-decoration: underline; text-underline-offset: 3px; }
.cart-line-item { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--hairline); }
.cart-line-item img { width: 72px; height: 56px; object-fit: contain; background: #FFFFFF; border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 4px; }
.cart-line-item__title { font-size: 14px; font-weight: 600; color: var(--ink-obsidian); }
.cart-line-item__meta { font-size: 12.5px; color: var(--ink-graphite); margin: 3px 0 8px; }
.cart-line-item__controls { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cart-line-qty { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--hairline-strong); border-radius: var(--radius-pill); padding: 2px 8px; font-size: 13px; }
.cart-line-qty button { border: 0; background: transparent; padding: 2px 5px; font-size: 14px; }
.cart-line-remove { border: 0; background: transparent; font-size: 12px; color: var(--ink-muted); text-decoration: underline; }
/* Quick 1-Click Cross-Sell Strip inside Cart Drawer */ .cart-cross-sell { padding: 12px 24px; background: var(--surface-stone); border-top: 1px solid var(--hairline); }
.cart-cross-sell__title { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-muted); margin-bottom: 8px; }
.cart-cross-sell__list { display: grid; gap: 8px; }
.cart-cross-sell__item { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 10px; background: #FFFFFF; border: 1px solid var(--hairline); border-radius: var(--radius-sm); }
.cart-cross-sell__item img { width: 48px; height: 36px; object-fit: contain; }
.cart-cross-sell__info { min-width: 0; }
.cart-cross-sell__info strong { display: block; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cart-cross-sell__info span { font-size: 12px; color: var(--ink-graphite); }
.cart-cross-sell__btn { padding: 5px 11px; border-radius: var(--radius-pill); border: 1px solid var(--ink-obsidian); background: #FFFFFF; color: var(--ink-obsidian); font-size: 12px; font-weight: 600; white-space: nowrap; }
.cart-cross-sell__btn:hover { background: var(--ink-obsidian); color: #FFFFFF; }
.cart-drawer__footer { padding: 16px 24px 22px; border-top: 1px solid var(--hairline); background: #FFFFFF; }
.cart-summary-rows { display: grid; gap: 6px; margin-bottom: 10px; }
.cart-summary-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; color: var(--ink-graphite); }
.cart-summary-row--total { padding-top: 8px; border-top: 1px solid var(--hairline); font-size: 16px; color: var(--ink-obsidian); }
.cart-free-tag { font-weight: 600; color: var(--ink-obsidian); }
.cart-limit-footnote { font-size: 11.5px; color: var(--ink-muted); margin-bottom: 12px; }
/* Modals & Lightbox */ .store-modal, .lightbox-modal { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 20px; }
.store-modal[data-checkout-open="true"], .store-modal[data-testride-open="true"], .lightbox-modal[data-lightbox-open="true"] { display: flex; }
.store-modal__dialog { position: relative; z-index: 1; width: min(560px, 100%); max-height: 92vh; overflow-y: auto; background: #FFFFFF; border-radius: var(--radius-lg); box-shadow: var(--shadow-elevated); }
.store-modal__dialog--wide { width: min(860px, 100%); }
.checkout-form, .testride-form, .receipt-panel { padding: 24px; }
.checkout-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr); gap: 24px; align-items: start; }
.form-row-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.form-field { margin-bottom: 14px; }
.form-field label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 5px; color: var(--ink-obsidian); }
.form-field input, .form-field select { width: 100%; min-height: 42px; padding: 9px 12px; border-radius: var(--radius-sm); border: 1px solid var(--hairline-strong); background: #FFFFFF; font-size: 14px; }
.checkbox-confirm { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; color: var(--ink-graphite); margin-top: 6px; }
.checkout-summary-box { padding: 20px; border-radius: var(--radius-md); background: var(--surface-stone); border: 1px solid var(--hairline); }
.checkout-summary-box h3 { font-size: 16px; margin-bottom: 12px; }
.checkout-summary-lines { display: grid; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--hairline); margin-bottom: 12px; }
.checkout-summary-total { display: flex; justify-content: space-between; font-size: 16px; margin-bottom: 16px; }
.receipt-badge { display: inline-block; padding: 5px 12px; border-radius: var(--radius-pill); background: var(--surface-stone); border: 1px solid var(--hairline-strong); font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; margin-bottom: 12px; }
.receipt-title { font-size: 22px; margin-bottom: 6px; }
.receipt-locator { font-size: 14px; color: var(--ink-graphite); margin-bottom: 16px; }
.receipt-details-grid { display: grid; gap: 8px; padding: 16px; border-radius: var(--radius-md); background: var(--surface-stone); font-size: 13.5px; margin-bottom: 16px; }
.receipt-items-summary { font-size: 13px; color: var(--ink-graphite); margin-bottom: 18px; display: grid; gap: 4px; }
.lightbox-dialog { position: relative; z-index: 1; width: min(980px, 100%); background: #FFFFFF; border-radius: var(--radius-lg); padding: 20px 24px 24px; box-shadow: var(--shadow-elevated); }
.lightbox-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--hairline); }
.lightbox-meta { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.lightbox-counter { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-muted); }
.lightbox-body { position: relative; display: flex; align-items: center; justify-content: center; padding: 20px 0; }
.lightbox-image { max-height: 68vh; width: auto; object-fit: contain; }
.lightbox-nav-btn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--hairline-strong); background: #FFFFFF; font-size: 22px; flex-shrink: 0; }
.lightbox-caption { text-align: center; font-size: 13.5px; color: var(--ink-graphite); }
/* Responsive Breakpoints (1440px+ / <=1024px / <=640px) */
@media (min-width: 1440px) {
.container { max-width: 1360px; padding: 0 36px; }
.hero-split { gap: 72px; }
}
@media (max-width: 1024px) {
.main-nav, .btn-header-testride { display: none; }
.mobile-menu-btn { display: inline-flex; }
.hero-split, .model-card, .nfc-pro-grid, .simulator-card, .showroom-faq-grid, .checkout-grid { grid-template-columns: minmax(0, 1fr); }
.model-gallery-col { position: static; }
.trust-pillars, .accessories-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hero-quick-grid, .editorial-trio-grid, .delivery-steps-grid { grid-template-columns: minmax(0, 1fr); }
.lookbook-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-footer__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 640px) {
.container { padding: 0 16px; }
.announcement-bar { font-size: 11.5px; }
.site-header__inner { gap: 8px; min-height: 62px; }
.brand-logo__word { font-size: 14.5px; letter-spacing: 0.09em; }
.brand-logo__mark { width: 28px; height: 28px; }
.header-tools { gap: 6px; }
.header-search { padding: 5px 9px; }
.header-search__input { width: 82px; font-size: 12.5px; }
.cart-toggle-btn { padding: 7px 10px; gap: 6px; }
.cart-toggle-btn__label, .cart-header-subtotal { display: none; }
.mobile-nav-drawer__links, .trust-pillars, .accessories-grid, .lookbook-grid, .buy-box__kpi-grid, .buy-box__purchase-row, .buy-box__secondary-actions, .sim-metrics-pair, .form-row-2 { grid-template-columns: minmax(0, 1fr); }
.qty-stepper { justify-content: space-between; padding: 0 12px; }
.hero-campaign-panel, .road-test-card, .nfc-cockpit-preview { grid-template-columns: minmax(0, 1fr); }
.road-test-card__video-wrap { width: 148px; margin: 0 auto; }
.thumb-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.hw-key--mode { color: var(--accent-electric); }
.sim-metric-box { padding: 16px; border-radius: 14px; background: var(--store-alt); }
.checkout-fields { display: flex; flex-direction: column; gap: 14px; }