/* ═══════════════════════════════════════════════════════════════
   HW COLLECTOR — Dark Racing Aesthetic
   Fonts: Bebas Neue (display) + Barlow Condensed + Barlow
   ═══════════════════════════════════════════════════════════════ */

:root {
  --bg:       #0a0a0c;
  --bg2:      #111116;
  --bg3:      #18181f;
  --surface:  #1e1e28;
  --border:   #2e2e3e;
  --red:      #e8152a;
  --red-dark: #b50f1f;
  --orange:   #ff6b1a;
  --yellow:   #ffd60a;
  --white:    #f4f4f6;
  --gray:     #8888a0;
  --gray-light: #bbbbcc;
  --font-display: 'Bebas Neue', sans-serif;
  --font-cond: 'Barlow Condensed', sans-serif;
  --font-body: 'Barlow', sans-serif;
  --radius: 8px;
  --radius-lg: 14px;
  --shadow: 0 4px 24px rgba(0,0,0,0.5);
  --shadow-red: 0 0 40px rgba(232,21,42,0.25);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
input, textarea, select, button { font-family: inherit; }

/* ── SCROLLBAR ───────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--red); border-radius: 3px; }

/* ── UTILS ───────────────────────────────────────────────────── */
.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.text-accent { color: var(--red); }
.text-muted { color: var(--gray); font-size: 0.85rem; }

/* ── BUTTONS ─────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--red);
  color: #fff;
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 12px 28px;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  white-space: nowrap;
}
.btn-primary:hover { background: var(--red-dark); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(232,21,42,0.4); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent;
  color: var(--white);
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 12px 28px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.btn-ghost:hover { border-color: var(--white); }

.btn-ghost-dark {
  display: inline-flex; align-items: center;
  background: transparent;
  color: var(--gray-light);
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  padding: 10px 20px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.2s;
}
.btn-ghost-dark:hover { border-color: var(--gray); }

.btn-full { width: 100%; justify-content: center; }

.btn-nav {
  background: var(--red);
  color: #fff;
  font-family: var(--font-cond);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.9rem;
  padding: 8px 20px;
  border-radius: var(--radius);
  transition: background 0.2s;
}
.btn-nav:hover { background: var(--red-dark); }

.btn-nav-outline {
  color: var(--gray-light);
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 8px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.2s;
}
.btn-nav-outline:hover { border-color: var(--gray); }

.btn-card {
  background: var(--surface);
  color: var(--white);
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 6px;
  border: 1px solid var(--border);
  transition: background 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.btn-card:hover { background: var(--red); border-color: var(--red); }

.btn-outline-sm {
  color: var(--gray-light);
  font-family: var(--font-cond);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  transition: border-color 0.2s, color 0.2s;
}
.btn-outline-sm:hover { border-color: var(--gray); color: var(--white); }

/* ── FLASH MESSAGES ──────────────────────────────────────────── */
.flash-container {
  position: fixed; top: 80px; right: 20px; z-index: 9999;
  display: flex; flex-direction: column; gap: 10px;
  max-width: 380px;
}
.flash {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px;
  border-radius: var(--radius);
  font-family: var(--font-cond);
  font-size: 1rem;
  font-weight: 600;
  animation: slideInRight 0.3s ease;
  backdrop-filter: blur(12px);
}
.flash-success { background: rgba(34,197,94,0.15); border: 1px solid rgba(34,197,94,0.4); color: #4ade80; }
.flash-error   { background: rgba(232,21,42,0.15); border: 1px solid rgba(232,21,42,0.4); color: #f87171; }
.flash-info    { background: rgba(99,102,241,0.15); border: 1px solid rgba(99,102,241,0.4); color: #a5b4fc; }
.flash-close { background: none; border: none; cursor: pointer; color: inherit; font-size: 1.2rem; line-height: 1; opacity: 0.7; padding: 0; }
.flash-close:hover { opacity: 1; }

@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* ── NAVBAR ──────────────────────────────────────────────────── */
.navbar {
  position: sticky; top: 0; z-index: 100;
  background: rgba(10,10,12,0.95);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: 1180px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; gap: 32px; height: 64px;
}
.nav-logo {
  display: flex; align-items: center; gap: 4px;
  flex-shrink: 0;
}
.logo-hw {
  font-family: var(--font-display);
  font-size: 1.8rem;
  color: var(--red);
  letter-spacing: 0.02em;
  line-height: 1;
}
.logo-collector {
  font-family: var(--font-cond);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-light);
  margin-top: 4px;
}
.nav-links { display: flex; gap: 4px; flex: 1; }
.nav-link {
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray);
  padding: 8px 14px;
  border-radius: 6px;
  transition: color 0.2s, background 0.2s;
}
.nav-link:hover, .nav-link.active { color: var(--white); background: var(--surface); }
.nav-link.active { color: var(--red); }

.nav-user { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.user-badge {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-cond);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--gray-light);
  background: var(--surface);
  padding: 6px 14px;
  border-radius: 100px;
  border: 1px solid var(--border);
}

.hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; }
.hamburger span { display: block; width: 22px; height: 2px; background: var(--white); border-radius: 2px; transition: 0.3s; }

.mobile-menu {
  display: none; flex-direction: column;
  background: var(--bg2); border-top: 1px solid var(--border);
  padding: 12px 24px;
}
.mobile-menu a {
  font-family: var(--font-cond); font-weight: 600; font-size: 1.05rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray-light);
  padding: 12px 0; border-bottom: 1px solid var(--border);
}
.mobile-menu a:last-child { border-bottom: none; }
.mobile-menu.open { display: flex; }

/* ── HERO ────────────────────────────────────────────────────── */
.hero {
  position: relative; min-height: 88vh;
  display: flex; align-items: center;
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background: var(--bg);
}
.hero-stripes {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent, transparent 60px,
    rgba(232,21,42,0.025) 60px, rgba(232,21,42,0.025) 62px
  );
}
.hero-glow {
  position: absolute;
  top: -20%; left: 50%; transform: translateX(-50%);
  width: 800px; height: 600px;
  background: radial-gradient(ellipse at center, rgba(232,21,42,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.hero-content {
  position: relative; z-index: 1;
  max-width: 1180px; margin: 0 auto; padding: 0 24px;
  padding-top: 80px; padding-bottom: 80px;
}
.hero-eyebrow {
  font-family: var(--font-cond); font-weight: 600;
  font-size: 0.95rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--red); margin-bottom: 16px;
}
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(4rem, 10vw, 9rem);
  line-height: 0.9;
  color: var(--white);
  letter-spacing: 0.02em;
  margin-bottom: 24px;
}
.hero-title-accent { color: var(--red); display: block; }
.hero-sub {
  font-size: 1.1rem; color: var(--gray-light);
  max-width: 500px; margin-bottom: 36px; line-height: 1.7;
}
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 56px; }
.hero-stats { display: flex; align-items: center; gap: 0; }
.hero-stat { text-align: center; padding: 0 32px; }
.hero-stat:first-child { padding-left: 0; }
.stat-num {
  display: block;
  font-family: var(--font-display); font-size: 2.8rem;
  color: var(--white); line-height: 1;
}
.stat-label {
  display: block;
  font-family: var(--font-cond); font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray);
  margin-top: 4px;
}
.hero-stat-divider { width: 1px; height: 50px; background: var(--border); flex-shrink: 0; }

.hero-scroll-indicator {
  position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: var(--font-cond); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.15em; color: var(--gray);
  animation: bounce 2s infinite;
}
.scroll-line { width: 1px; height: 32px; background: linear-gradient(to bottom, var(--gray), transparent); }
@keyframes bounce { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(8px); } }

/* ── MARCAS BAND ─────────────────────────────────────────────── */
.marcas-band {
  background: var(--bg2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 16px 0;
}
.marcas-band-inner {
  max-width: 1180px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.band-label {
  font-family: var(--font-cond); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray);
  flex-shrink: 0;
}
.marcas-list { display: flex; gap: 8px; flex-wrap: wrap; }
.marca-chip {
  font-family: var(--font-cond); font-size: 0.85rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--gray-light); background: var(--surface);
  border: 1px solid var(--border);
  padding: 4px 14px; border-radius: 100px;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.marca-chip:hover { background: var(--red); border-color: var(--red); color: #fff; }

/* ── SECTIONS ────────────────────────────────────────────────── */
.section { padding: 80px 0; }
.section-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 48px; gap: 20px;
}
.section-header.centered { flex-direction: column; align-items: center; text-align: center; }
.section-eyebrow {
  font-family: var(--font-cond); font-size: 0.85rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--red);
  margin-bottom: 8px;
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  line-height: 0.95; color: var(--white); letter-spacing: 0.02em;
}
.section-link {
  font-family: var(--font-cond); font-size: 0.9rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray);
  white-space: nowrap; padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.section-link:hover { color: var(--red); border-color: var(--red); }

/* ── CARS GRID ───────────────────────────────────────────────── */
.cars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
.car-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
  cursor: default;
}
.car-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(232,21,42,0.3);
  border-color: rgba(232,21,42,0.4);
}
.car-card-image {
  position: relative; height: 210px;
  background: radial-gradient(ellipse at center, #1a1a2e 0%, #0d0d14 100%);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.car-card-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.4s;
}
.car-card:hover .car-card-image img { transform: scale(1.06); }
.car-no-image {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--border);
}
.car-no-image svg { width: 64px; height: 64px; }

.car-badge-featured {
  position: absolute; top: 10px; left: 10px;
  background: var(--yellow); color: #000;
  font-family: var(--font-cond); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 4px;
}
.car-badge-stock {
  position: absolute; top: 10px; right: 10px;
  background: rgba(34,197,94,0.9); color: #fff;
  font-family: var(--font-cond); font-size: 0.75rem; font-weight: 700;
  padding: 3px 10px; border-radius: 4px;
}
.car-badge-agotado {
  position: absolute; top: 10px; right: 10px;
  background: rgba(100,100,120,0.9); color: var(--gray-light);
  font-family: var(--font-cond); font-size: 0.75rem; font-weight: 700;
  padding: 3px 10px; border-radius: 4px;
}

/* ── DIAGONAL AGOTADO OVERLAY ─────────────────────────────── */
.car-agotado-overlay {
  position: absolute; inset: 0; z-index: 10;
  pointer-events: none; overflow: hidden; border-radius: inherit;
}
.car-agotado-overlay::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.45);
}
.car-agotado-overlay::after {
  content: 'AGOTADO';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-35deg);
  font-family: var(--font-cond);
  font-size: 1.55rem;
  font-weight: 900;
  letter-spacing: .18em;
  color: rgba(255,255,255,0.95);
  white-space: nowrap;
  text-shadow: 0 2px 8px rgba(0,0,0,0.8);
  border: 3px solid rgba(255,255,255,0.7);
  padding: 6px 18px;
  border-radius: 4px;
  background: rgba(30,30,40,0.65);
  backdrop-filter: blur(2px);
}

.car-card-body { padding: 18px; }
.car-brand {
  font-family: var(--font-cond); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--red);
}
.car-model {
  font-family: var(--font-cond); font-size: 1.25rem; font-weight: 700;
  color: var(--white); margin: 4px 0 8px; line-height: 1.2;
}
.car-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.car-year, .car-serie, .car-color {
  font-family: var(--font-cond); font-size: 0.78rem; font-weight: 600;
  color: var(--gray);
  background: var(--bg3); border: 1px solid var(--border);
  padding: 2px 8px; border-radius: 4px;
}
.car-desc {
  font-size: 0.88rem; color: var(--gray); line-height: 1.5;
  margin-bottom: 14px;
}
.car-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.car-price {
  font-family: var(--font-display); font-size: 1.5rem; color: var(--yellow);
  letter-spacing: 0.02em;
}

/* ── HOW IT WORKS ────────────────────────────────────────────── */
.how-section { background: var(--bg2); border-top: 1px solid var(--border); }
.steps-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 32px;
}
.step {
  padding: 32px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  position: relative; overflow: hidden;
}
.step::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: linear-gradient(90deg, var(--red), var(--orange));
}
.step-number {
  font-family: var(--font-display); font-size: 3.5rem;
  color: var(--border); line-height: 1; margin-bottom: 16px;
}
.step h3 {
  font-family: var(--font-cond); font-size: 1.2rem; font-weight: 700;
  color: var(--white); letter-spacing: 0.04em; margin-bottom: 8px;
}
.step p { font-size: 0.92rem; color: var(--gray); line-height: 1.6; }

/* ── PAGE HEADER ─────────────────────────────────────────────── */
.page-header {
  padding: 56px 0 40px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--bg2) 0%, var(--bg) 100%);
}
.page-title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 6rem);
  line-height: 0.95; color: var(--white);
  letter-spacing: 0.02em;
}

/* ── FILTERS ─────────────────────────────────────────────────── */
.filters-bar { margin-bottom: 24px; }
.filters-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.filter-group { display: flex; flex-direction: column; gap: 6px; }
.filter-group label {
  font-family: var(--font-cond); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray);
}
.filter-input, .filter-select {
  background: var(--surface); color: var(--white);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px 14px; font-size: 0.95rem; min-width: 180px;
  transition: border-color 0.2s;
}
.filter-input:focus, .filter-select:focus {
  outline: none; border-color: var(--red);
}
.filter-select option { background: var(--surface); }
.btn-filter {
  background: var(--red); color: #fff;
  font-family: var(--font-cond); font-weight: 700; font-size: 0.95rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 10px 22px; border: none; border-radius: var(--radius);
  cursor: pointer; transition: background 0.2s;
}
.btn-filter:hover { background: var(--red-dark); }
.btn-clear {
  color: var(--gray); font-family: var(--font-cond); font-size: 0.9rem;
  padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius);
  transition: color 0.2s;
}
.btn-clear:hover { color: var(--white); }

.brand-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.brand-pill {
  font-family: var(--font-cond); font-size: 0.85rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--gray-light); background: var(--surface);
  border: 1px solid var(--border);
  padding: 6px 16px; border-radius: 100px;
  transition: all 0.2s;
}
.brand-pill:hover { border-color: var(--red); color: var(--red); }
.brand-pill.active { background: var(--red); border-color: var(--red); color: #fff; }

.results-info {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 24px;
  font-family: var(--font-cond); font-size: 0.9rem; color: var(--gray);
}
.results-filter-tag {
  background: var(--surface); border: 1px solid var(--border);
  padding: 3px 10px; border-radius: 100px;
  font-size: 0.82rem;
}
.results-filter-tag a { color: var(--red); margin-left: 6px; }

/* ── EMPTY STATE ─────────────────────────────────────────────── */
.empty-state {
  text-align: center; padding: 80px 24px;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.empty-icon { font-size: 3.5rem; }
.empty-state h3 {
  font-family: var(--font-cond); font-size: 1.4rem; font-weight: 700; color: var(--white);
}
.empty-state p { color: var(--gray); max-width: 360px; }

/* ── ACCESO PAGE ─────────────────────────────────────────────── */
.acceso-section {
  position: relative; min-height: calc(100vh - 64px);
  display: flex; align-items: center; justify-content: center;
  padding: 60px 24px;
}
.acceso-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(232,21,42,0.08), transparent 60%);
  pointer-events: none;
}
.acceso-container {
  position: relative; z-index: 1;
  width: 100%; max-width: 500px;
  display: flex; flex-direction: column; gap: 8px;
}
.acceso-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
}
.acceso-card-header { text-align: center; margin-bottom: 28px; }
.acceso-icon { font-size: 2rem; display: block; margin-bottom: 12px; }
.acceso-card-header h2 {
  font-family: var(--font-display); font-size: 2rem; color: var(--white);
}
.acceso-card-header p { color: var(--gray); font-size: 0.92rem; margin-top: 4px; }

.acceso-divider {
  display: flex; align-items: center; gap: 16px;
  padding: 4px 32px;
}
.acceso-divider::before, .acceso-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}
.acceso-divider span {
  font-family: var(--font-cond); font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.08em; color: var(--gray); text-transform: uppercase;
  white-space: nowrap;
}

.auth-tabs {
  display: flex; gap: 4px; margin-bottom: 28px;
  background: var(--bg3); padding: 4px; border-radius: var(--radius);
}
.auth-tab {
  flex: 1; background: none; border: none; cursor: pointer;
  font-family: var(--font-cond); font-weight: 700; font-size: 0.95rem;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--gray); padding: 10px;
  border-radius: 6px; transition: all 0.2s;
}
.auth-tab.active { background: var(--surface); color: var(--white); }
.auth-panel { display: none; }
.auth-panel.active { display: block; }

/* ── FORMS ───────────────────────────────────────────────────── */
.acceso-form { display: flex; flex-direction: column; gap: 18px; }
.form-group { display: flex; flex-direction: column; gap: 7px; }
.form-group label {
  font-family: var(--font-cond); font-size: 0.82rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-light);
}
.form-group input, .form-group textarea, .form-group select {
  background: var(--bg3); color: var(--white);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 14px; font-size: 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
  outline: none; border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(232,21,42,0.15);
}
.form-group textarea { resize: vertical; min-height: 100px; }
.form-group select option { background: var(--bg3); }

.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }

.form-check-group .checkbox-label {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  font-family: var(--font-cond); font-size: 0.95rem; font-weight: 600; color: var(--gray-light);
  text-transform: none; letter-spacing: 0;
}
.form-check-group input[type="checkbox"] { display: none; }
.checkbox-custom {
  width: 20px; height: 20px; flex-shrink: 0;
  border: 2px solid var(--border); border-radius: 4px;
  background: var(--bg3); transition: all 0.2s;
  position: relative;
}
.form-check-group input[type="checkbox"]:checked + .checkbox-custom {
  background: var(--red); border-color: var(--red);
}
.form-check-group input[type="checkbox"]:checked + .checkbox-custom::after {
  content: '✓'; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: #fff; font-size: 0.8rem; font-weight: 700;
}

.form-actions { display: flex; gap: 12px; align-items: center; padding-top: 8px; }

/* File Upload */
.file-upload-area {
  position: relative;
  border: 2px dashed var(--border); border-radius: var(--radius);
  background: var(--bg3); overflow: hidden; cursor: pointer;
  transition: border-color 0.2s;
}
.file-upload-area:hover { border-color: var(--red); }
.file-input {
  position: absolute; inset: 0; opacity: 0; cursor: pointer;
  width: 100%; height: 100%;
  border: none !important; background: none !important; padding: 0 !important;
  box-shadow: none !important;
}
.file-upload-ui {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; padding: 32px; color: var(--gray); text-align: center;
}
.file-upload-ui svg { opacity: 0.4; }
.file-upload-ui p { font-size: 0.95rem; }
.file-upload-ui strong { color: var(--gray-light); }
.file-upload-ui span { font-size: 0.8rem; }

.file-preview {
  padding: 16px; display: flex; align-items: center; gap: 16px;
  background: var(--bg3);
}
.file-preview img { width: 80px; height: 60px; object-fit: cover; border-radius: 6px; }
.file-preview span { font-size: 0.88rem; color: var(--gray-light); word-break: break-all; }

.current-image {
  display: flex; align-items: center; gap: 14px; margin-bottom: 12px;
  padding: 12px; background: var(--bg3); border-radius: var(--radius);
}
.current-image img { width: 80px; height: 60px; object-fit: cover; border-radius: 6px; }
.current-image-label { font-size: 0.85rem; color: var(--gray); }

/* ── FOOTER ──────────────────────────────────────────────────── */
.footer {
  background: var(--bg2); border-top: 1px solid var(--border);
  padding: 56px 0 0;
}
.footer-inner {
  max-width: 1180px; margin: 0 auto; padding: 0 24px 48px;
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px;
}
.footer-brand .logo-hw { font-size: 2.2rem; }
.footer-brand p { color: var(--gray); font-size: 0.9rem; margin-top: 12px; max-width: 280px; line-height: 1.6; }
.footer-links h4, .footer-info h4 {
  font-family: var(--font-cond); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray);
  margin-bottom: 16px;
}
.footer-links { display: flex; flex-direction: column; gap: 4px; }
.footer-links a {
  color: var(--gray-light); font-size: 0.92rem;
  padding: 4px 0; transition: color 0.2s;
}
.footer-links a:hover { color: var(--red); }
.footer-info p { color: var(--gray); font-size: 0.9rem; line-height: 1.6; }
.footer-bottom {
  border-top: 1px solid var(--border);
  padding: 20px 24px;
  max-width: 1180px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center;
}
.footer-bottom p { color: var(--gray); font-size: 0.85rem; }
.footer-admin-link {
  font-family: var(--font-cond); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--border); transition: color 0.2s;
}
.footer-admin-link:hover { color: var(--gray); }

/* ═══════════════════════════════════════════════════════════════
   ADMIN PANEL
   ═══════════════════════════════════════════════════════════════ */

.admin-body { background: #0d0d12; }

.admin-login-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: radial-gradient(ellipse at center, rgba(232,21,42,0.08), transparent 60%);
}
.admin-login-card {
  width: 100%; max-width: 400px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 40px;
}
.admin-login-header { text-align: center; margin-bottom: 32px; }
.admin-login-header .logo-hw { font-size: 2.5rem; }
.admin-login-subtitle {
  font-family: var(--font-cond); font-size: 0.85rem; color: var(--gray);
  letter-spacing: 0.1em; text-transform: uppercase; margin-top: 8px;
}
.admin-back-link {
  display: block; text-align: center; margin-top: 24px;
  font-family: var(--font-cond); font-size: 0.88rem; color: var(--gray);
  transition: color 0.2s;
}
.admin-back-link:hover { color: var(--white); }

/* Admin layout */
.admin-layout {
  display: flex; min-height: 100vh;
}
.admin-sidebar {
  width: 220px; flex-shrink: 0;
  background: #0a0a0f; border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.admin-sidebar-logo {
  padding: 24px 20px 20px;
  border-bottom: 1px solid var(--border);
}
.admin-sidebar-logo .logo-hw { font-size: 1.6rem; }
.admin-sidebar-logo .logo-collector { font-size: 0.75rem; }
.admin-nav { flex: 1; padding: 16px 10px; display: flex; flex-direction: column; gap: 2px; }
.admin-nav-item {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-cond); font-size: 0.95rem; font-weight: 600;
  letter-spacing: 0.04em; color: var(--gray);
  padding: 10px 12px; border-radius: var(--radius);
  transition: background 0.2s, color 0.2s;
}
.admin-nav-item:hover { background: var(--surface); color: var(--white); }
.admin-nav-item.active { background: rgba(232,21,42,0.15); color: var(--red); }
.admin-nav-item.danger:hover { background: rgba(232,21,42,0.1); color: var(--red); }
.admin-sidebar-bottom { padding: 10px; border-top: 1px solid var(--border); }

.admin-main {
  flex: 1; padding: 32px; overflow-x: auto;
  background: #0d0d12;
}

.admin-page-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 32px; gap: 16px;
}
.admin-page-title {
  font-family: var(--font-display); font-size: 2rem; color: var(--white);
  display: flex; align-items: center; gap: 12px;
}

.count-badge {
  font-family: var(--font-cond); font-size: 1rem;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--gray); padding: 2px 10px; border-radius: 100px;
}

/* Admin stats */
.admin-stats-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px;
  margin-bottom: 32px;
}
.admin-stat-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 20px;
  display: flex; align-items: center; gap: 16px;
}
.admin-stat-icon {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; border-radius: 10px; flex-shrink: 0;
}
.admin-stat-icon.orange { background: rgba(255,107,26,0.15); }
.admin-stat-icon.red    { background: rgba(232,21,42,0.15); }
.admin-stat-icon.yellow { background: rgba(255,214,10,0.15); }
.admin-stat-icon.green  { background: rgba(34,197,94,0.15); }
.admin-stat-info { display: flex; flex-direction: column; }
.admin-stat-num {
  font-family: var(--font-display); font-size: 2rem; color: var(--white); line-height: 1;
}
.admin-stat-label {
  font-family: var(--font-cond); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray);
  margin-top: 2px;
}

/* Admin section */
.admin-section { margin-bottom: 32px; }
.admin-section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.admin-section-header h2 {
  font-family: var(--font-cond); font-size: 1.2rem; font-weight: 700;
  color: var(--white); letter-spacing: 0.04em;
}

/* Admin table */
.admin-table-wrap {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow-x: auto;
}
.admin-table {
  width: 100%; border-collapse: collapse; font-size: 0.9rem;
}
.admin-table th {
  font-family: var(--font-cond); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray);
  padding: 14px 16px; text-align: left;
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
.admin-table td {
  padding: 12px 16px; color: var(--gray-light);
  border-bottom: 1px solid rgba(46,46,62,0.5);
}
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: rgba(255,255,255,0.02); }
.admin-table code {
  font-size: 0.82rem; background: var(--bg3); padding: 2px 8px; border-radius: 4px;
  color: var(--orange);
}
.empty-row { text-align: center; color: var(--gray); padding: 40px !important; }
.empty-row a { color: var(--red); }

/* Admin thumb */
.admin-thumb {
  width: 60px; height: 44px; object-fit: cover;
  border-radius: 6px; border: 1px solid var(--border);
}
.admin-thumb-empty {
  width: 60px; height: 44px;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 6px; display: flex; align-items: center; justify-content: center;
  color: var(--border); font-size: 1.2rem;
}

/* Badges */
.badge {
  display: inline-flex; align-items: center;
  font-family: var(--font-cond); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 100px;
}
.badge-reg  { background: rgba(34,197,94,0.15);  color: #4ade80; }
.badge-guest{ background: rgba(148,163,184,0.15); color: #94a3b8; }
.badge-star { background: rgba(255,214,10,0.15);  color: var(--yellow); }

/* Action buttons */
.action-btns { display: flex; gap: 6px; }
.btn-action {
  font-family: var(--font-cond); font-size: 0.82rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 6px; border: none; cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.btn-action.edit { background: rgba(99,102,241,0.15); color: #a5b4fc; }
.btn-action.edit:hover { background: rgba(99,102,241,0.35); }
.btn-action.delete { background: rgba(232,21,42,0.12); color: #f87171; }
.btn-action.delete:hover { background: rgba(232,21,42,0.3); }

/* Admin form card */
.admin-form-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 32px;
  max-width: 720px;
}
.admin-form { display: flex; flex-direction: column; gap: 20px; }

/* ── RESPONSIVE ──────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════
   MODAL DE AUTO
   ═══════════════════════════════════════════════════════════════ */

.modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.88);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.modal-overlay.open {
  opacity: 1; pointer-events: all;
}

.modal-box {
  position: relative;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 20px;
  width: 100%;
  max-width: 900px;
  max-height: 90vh;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  transform: translateY(24px) scale(0.97);
  transition: transform 0.3s ease;
  box-shadow: 0 32px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(232,21,42,0.15);
}
.modal-overlay.open .modal-box {
  transform: translateY(0) scale(1);
}

/* Close button */
.modal-close {
  position: absolute; top: 16px; right: 16px; z-index: 10;
  width: 36px; height: 36px;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--gray-light);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, color 0.2s;
}
.modal-close:hover { background: rgba(232,21,42,0.2); color: var(--red); }

/* GALLERY SIDE */
.modal-gallery {
  background: radial-gradient(ellipse at center, #1a1a2e 0%, #0a0a10 100%);
  border-radius: 20px 0 0 20px;
  padding: 24px;
  display: flex; flex-direction: column; gap: 12px;
  min-height: 400px;
}

.modal-img-main {
  position: relative;
  flex: 1;
  min-height: 300px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0,0,0,0.3);
}
.modal-img-main img {
  max-width: 100%; max-height: 360px;
  object-fit: contain;
  border-radius: 8px;
  transition: opacity 0.25s ease;
}
.modal-img-main img.fading { opacity: 0; }
/* Ocultar INSTANTÁNEAMENTE al cambiar de auto (sin transición) */
.modal-img-main img.instant-hide { opacity: 0; transition: none !important; }
/* Spinner mientras carga */
.modal-img-main .modal-spinner {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 36px; height: 36px;
  border: 3px solid rgba(255,255,255,0.1);
  border-top-color: #e8152a;
  border-radius: 50%;
  animation: modal-spin 0.7s linear infinite;
  display: none;
  z-index: 2;
}
.modal-img-main .modal-spinner.active { display: block; }
@keyframes modal-spin { to { transform: translate(-50%,-50%) rotate(360deg); } }

/* Gallery nav arrows */
.gallery-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px;
  background: rgba(0,0,0,0.6);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--white);
  font-size: 1.5rem; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, border-color 0.2s;
  z-index: 2;
}
.gallery-nav:hover { background: var(--red); border-color: var(--red); }
.gallery-nav.prev { left: 10px; }
.gallery-nav.next { right: 10px; }
.gallery-nav:disabled { opacity: 0.2; cursor: default; pointer-events: none; }

/* Counter */
.gallery-counter {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,0.65);
  font-family: var(--font-cond); font-size: 0.78rem; font-weight: 700;
  color: var(--gray-light); letter-spacing: 0.06em;
  padding: 3px 12px; border-radius: 100px;
  white-space: nowrap;
}

/* Thumbnails strip */
.modal-thumbnails {
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
}
.modal-thumb {
  width: 58px; height: 46px;
  object-fit: contain;
  background: rgba(0,0,0,0.4);
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.15s;
  padding: 2px;
}
.modal-thumb:hover { transform: scale(1.08); border-color: var(--gray); }
.modal-thumb.active { border-color: var(--red); }

/* INFO SIDE */
.modal-info {
  padding: 36px 32px 36px 28px;
  display: flex; flex-direction: column; gap: 12px;
  justify-content: center;
}

.modal-info-top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.modal-brand {
  font-family: var(--font-cond); font-size: 0.85rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--red);
}
.modal-stock-badge {
  font-family: var(--font-cond); font-size: 0.8rem; font-weight: 700;
  padding: 4px 12px; border-radius: 100px;
}
.modal-stock-badge.in-stock  { background: rgba(34,197,94,0.15); color: #4ade80; }
.modal-stock-badge.out-stock { background: rgba(100,100,120,0.2); color: var(--gray); }

.modal-modelo {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 0.95; color: var(--white);
  letter-spacing: 0.02em;
}

.modal-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.modal-tag {
  font-family: var(--font-cond); font-size: 0.8rem; font-weight: 600;
  color: var(--gray); background: var(--bg3); border: 1px solid var(--border);
  padding: 3px 10px; border-radius: 4px;
}

.modal-desc {
  font-size: 0.92rem; color: var(--gray-light); line-height: 1.65;
  border-top: 1px solid var(--border); padding-top: 12px;
}

.modal-price-row {
  display: flex; align-items: center;
  padding-top: 8px;
}
.modal-price {
  font-family: var(--font-display); font-size: 2.4rem;
  color: var(--yellow); letter-spacing: 0.02em;
}

/* Responsive modal */


/* ═══════════════════════════════════════════════════════════════
   ADMIN FOTOS GRID
   ═══════════════════════════════════════════════════════════════ */

.fotos-section-label {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.fotos-hint {
  font-family: var(--font-body); font-size: 0.8rem; font-weight: 400;
  color: var(--gray); letter-spacing: 0; text-transform: none;
}

.fotos-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-top: 10px;
}

.foto-slot {
  position: relative;
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  background: var(--bg3);
  min-height: 130px;
  overflow: hidden;
  transition: border-color 0.2s;
}
.foto-slot:hover { border-color: var(--gray); }
.foto-slot.has-image { border-style: solid; border-color: var(--border); }
.foto-slot.marked-delete {
  border-color: var(--red);
  opacity: 0.5;
}

.foto-slot-badge {
  position: absolute; top: 6px; left: 6px; z-index: 2;
  font-family: var(--font-cond); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.05em; color: var(--gray);
  background: rgba(0,0,0,0.65); padding: 2px 7px; border-radius: 4px;
  pointer-events: none;
}
.slot-badge-principal { color: var(--yellow); }

.foto-slot-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; height: 100%; min-height: 130px;
  cursor: pointer; color: var(--gray);
  font-family: var(--font-cond); font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  transition: color 0.2s;
  padding: 12px;
}
.foto-slot-empty:hover { color: var(--white); }
.foto-slot-empty svg { opacity: 0.4; }

.foto-slot-preview {
  display: flex; flex-direction: column; align-items: center;
  width: 100%; height: 100%;
}
.foto-slot-preview img {
  width: 100%; height: 90px; object-fit: contain;
  background: var(--bg3); padding: 6px;
}
.foto-slot-actions {
  display: flex; flex-direction: column; gap: 4px;
  width: 100%; padding: 6px;
}
.btn-slot-replace, .btn-slot-delete {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  font-family: var(--font-cond); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 4px 6px; border-radius: 5px; cursor: pointer;
  text-align: center; transition: background 0.15s;
}
.btn-slot-replace {
  background: rgba(99,102,241,0.15); color: #a5b4fc;
}
.btn-slot-replace:hover { background: rgba(99,102,241,0.3); }
.btn-slot-delete {
  background: rgba(232,21,42,0.1); color: #f87171;
}
.btn-slot-delete input[type="checkbox"] { display: none; }
.btn-slot-delete:hover { background: rgba(232,21,42,0.25); }

.foto-file-input {
  display: none !important;
}
.preview-name {
  font-size: 0.72rem; color: var(--gray); padding: 4px 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%;
  text-align: center;
}

.fotos-tip {
  font-size: 0.82rem; color: var(--gray); margin-top: 8px;
}

/* Badge fotos en card */
.car-badge-fotos {
  position: absolute; bottom: 10px; left: 10px;
  background: rgba(0,0,0,0.7);
  font-family: var(--font-cond); font-size: 0.72rem; font-weight: 700;
  color: var(--gray-light); padding: 3px 8px; border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════════
   MODAL BIENVENIDA
   ═══════════════════════════════════════════════════════════════ */

.welcome-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,0.92);
  backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s ease;
}
.welcome-overlay.open {
  opacity: 1; pointer-events: all;
}

.welcome-box {
  position: relative;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 20px;
  width: 100%; max-width: 420px;
  padding: 0 0 32px;
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(0,0,0,0.8), 0 0 0 1px rgba(232,21,42,0.2);
  transform: translateY(20px) scale(0.96);
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.welcome-overlay.open .welcome-box {
  transform: translateY(0) scale(1);
}

/* Franja roja top */
.welcome-top-stripe {
  height: 4px;
  background: linear-gradient(90deg, var(--red), var(--orange), var(--yellow));
}

.welcome-logo {
  display: flex; align-items: center; gap: 4px;
  justify-content: center;
  padding: 24px 32px 4px;
}
.welcome-logo .logo-hw { font-size: 2rem; }
.welcome-logo .logo-collector { font-size: 0.8rem; margin-top: 4px; }

.welcome-title {
  font-family: var(--font-display);
  font-size: 2.2rem; line-height: 1;
  color: var(--white);
  text-align: center;
  padding: 12px 32px 0;
  letter-spacing: 0.02em;
}

.welcome-sub {
  text-align: center;
  font-size: 0.92rem;
  color: var(--gray);
  line-height: 1.6;
  padding: 10px 32px 24px;
}

.welcome-form {
  padding: 0 32px;
  display: flex; flex-direction: column; gap: 12px;
}

.welcome-input-wrap input {
  width: 100%;
  background: var(--bg3);
  color: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: 1.05rem;
  font-family: var(--font-body);
  transition: border-color 0.2s, box-shadow 0.2s;
  text-align: center;
  letter-spacing: 0.02em;
}
.welcome-input-wrap input:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(232,21,42,0.15);
}
.welcome-input-wrap input::placeholder { color: var(--gray); }

.welcome-btn {
  font-size: 1.05rem;
  padding: 14px;
  letter-spacing: 0.06em;
}

.welcome-skip {
  display: block;
  margin: 16px auto 0;
  background: none; border: none; cursor: pointer;
  font-family: var(--font-cond); font-size: 0.82rem;
  color: var(--gray); letter-spacing: 0.04em;
  text-decoration: underline;
  transition: color 0.2s;
}
.welcome-skip:hover { color: var(--gray-light); }

/* ═══════════════════════════════════════════════════════════════
   LIGHTBOX — foto expandida a pantalla completa
   ═══════════════════════════════════════════════════════════════ */

.lightbox {
  position: fixed; inset: 0; z-index: 3000;
  background: rgba(0,0,0,0.97);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.lightbox.open {
  opacity: 1; pointer-events: all;
}

.lb-img-wrap {
  display: flex; align-items: center; justify-content: center;
  max-width: 92vw; max-height: 88vh;
  cursor: zoom-out;
}
.lb-img-wrap img {
  max-width: 92vw; max-height: 88vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.8);
  transition: opacity 0.2s ease;
  user-select: none;
  -webkit-user-drag: none;
}
.lb-img-wrap img.fading { opacity: 0; }

/* Botón cerrar */
.lb-close {
  position: fixed; top: 20px; right: 20px;
  width: 44px; height: 44px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
  z-index: 10;
}
.lb-close:hover { background: rgba(232,21,42,0.6); }

/* Flechas nav */
.lb-nav {
  position: fixed; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50%;
  color: #fff; font-size: 2rem; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
  z-index: 10;
}
.lb-nav:hover { background: rgba(232,21,42,0.5); }
.lb-nav:disabled { opacity: 0.15; cursor: default; pointer-events: none; }
.lb-prev { left: 16px; }
.lb-next { right: 16px; }

/* Contador */
.lb-counter {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-cond); font-size: 0.9rem; font-weight: 700;
  color: rgba(255,255,255,0.6); letter-spacing: 0.1em;
  background: rgba(0,0,0,0.5); padding: 4px 16px; border-radius: 100px;
}

/* Hint de zoom en la imagen del modal */
.zoom-hint {
  position: absolute; bottom: 10px; right: 10px;
  font-family: var(--font-cond); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.05em; color: rgba(255,255,255,0.7);
  background: rgba(0,0,0,0.6); padding: 3px 10px; border-radius: 4px;
  pointer-events: none;
  opacity: 1; transition: opacity 0.3s;
}

/* Footer contact links */
.footer-info a {
  display: block;
  color: var(--gray-light); font-size: 0.92rem;
  padding: 4px 0; transition: color 0.2s;
}
.footer-info a:hover { color: var(--red); }

/* ═══════════════════════════════════════════════════════════════
   HERO CAROUSEL — fullwidth entre stats y scroll
   ═══════════════════════════════════════════════════════════════ */

.hero-carousel {
  position: relative;
  width: 100%;
  height: 340px;
  margin-top: 40px;
  overflow: hidden;
  border-radius: 0;
}

.hero-carousel-track {
  position: relative;
  width: 100%; height: 100%;
}

/* Cada slide */
.hero-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transform: scale(1.06);
  transition:
    opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
}

.hero-slide.active {
  opacity: 1;
  transform: scale(1);
  z-index: 2;
}

.hero-slide.prev {
  opacity: 0;
  transform: scale(0.97);
  z-index: 1;
}

.hero-slide img {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center;
  background: radial-gradient(ellipse at center, #1a1a2e 0%, #06060a 100%);
}

/* Gradiente lateral para que se funda con el hero */
.slide-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right,  rgba(10,10,12,0.7) 0%, transparent 18%, transparent 82%, rgba(10,10,12,0.7) 100%),
    linear-gradient(to bottom, rgba(10,10,12,0.5) 0%, transparent 30%, transparent 70%, rgba(10,10,12,0.8) 100%);
  pointer-events: none;
}

/* Flechas */
.carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 10;
  width: 44px; height: 44px;
  background: rgba(0,0,0,0.55);
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: 50%;
  color: #fff; font-size: 1.8rem; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
  backdrop-filter: blur(6px);
}
.carousel-arrow:hover {
  background: rgba(232,21,42,0.7);
  border-color: var(--red);
  transform: translateY(-50%) scale(1.1);
}
.carousel-arrow-left  { left: 16px; }
.carousel-arrow-right { right: 16px; }

/* Dots */
.carousel-dots {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  z-index: 10;
  display: flex; gap: 7px; align-items: center;
}
.carousel-dot {
  width: 7px; height: 7px;
  background: rgba(255,255,255,0.3);
  border: none; border-radius: 50%; cursor: pointer;
  transition: background 0.3s, transform 0.3s, width 0.3s;
  padding: 0;
}
.carousel-dot.active {
  background: var(--red);
  width: 22px;
  border-radius: 4px;
  transform: scale(1.1);
}
.carousel-dot:hover:not(.active) { background: rgba(255,255,255,0.6); }

/* Barra de progreso */
.carousel-progress {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 3px;
  background: rgba(255,255,255,0.08);
  z-index: 10;
}
.carousel-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--red), var(--orange));
  border-radius: 0 2px 2px 0;
}

/* Ajuste del scroll indicator para que no choque */
.hero .hero-scroll-indicator {
  margin-top: 20px;
  position: relative;
  bottom: auto; left: auto;
  transform: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  animation: bounce 2s infinite;
}

/* ── Admin Carousel Page ─────────────────────────────────────── */
.carousel-upload-zone {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  background: var(--bg3);
  padding: 36px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.carousel-upload-zone:hover { border-color: var(--red); background: rgba(232,21,42,0.04); }
.carousel-upload-zone p { color: var(--white); font-family: var(--font-cond); font-size: 1rem; font-weight: 600; letter-spacing: 0.05em; margin: 0; }
.carousel-upload-zone span { color: var(--gray); font-size: 0.82rem; }
.carousel-filenames { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 8px; }
.carousel-fname { background: rgba(232,21,42,0.12); color: var(--red); font-size: 0.75rem; font-family: var(--font-cond); padding: 3px 10px; border-radius: 4px; }

.carousel-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}
.carousel-admin-item {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg3);
  aspect-ratio: 16/10;
  border: 1px solid var(--border);
}
.carousel-admin-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}
.carousel-admin-item:hover img { transform: scale(1.04); }
.carousel-admin-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.2s;
}
.carousel-admin-item:hover .carousel-admin-overlay { opacity: 1; }
.carousel-delete-btn {
  background: rgba(232,21,42,0.85); color: #fff;
  border: none; border-radius: 6px; padding: 8px 14px;
  font-family: var(--font-cond); font-size: 0.85rem; font-weight: 700;
  cursor: pointer; letter-spacing: 0.04em;
  transition: background 0.2s;
}
.carousel-delete-btn:hover { background: var(--red); }

/* ═══════════════════════════════════════════════════════
   WHATSAPP FAB
   ═══════════════════════════════════════════════════════ */
.whatsapp-fab {
  position: fixed; bottom: 28px; right: 28px; z-index: 999;
  width: 58px; height: 58px;
  background: #25D366;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(37,211,102,0.4);
  color: #fff;
  transition: transform 0.2s, box-shadow 0.2s;
  animation: fabPulse 3s ease infinite;
}
.whatsapp-fab:hover { transform: scale(1.1); box-shadow: 0 6px 28px rgba(37,211,102,0.6); }
@keyframes fabPulse {
  0%,100% { box-shadow: 0 4px 20px rgba(37,211,102,0.4); }
  50%      { box-shadow: 0 4px 32px rgba(37,211,102,0.7); }
}

/* ═══════════════════════════════════════════════════════
   BUY BUTTON IN MODAL
   ═══════════════════════════════════════════════════════ */
.btn-buy-wa {
  display: flex; align-items: center; justify-content: center;
  width: 100%; margin-top: 16px;
  background: #25D366 !important;
  color: #fff !important;
  font-size: 1rem; font-weight: 700;
  border-radius: var(--radius);
  padding: 14px 24px;
  transition: background 0.2s, transform 0.15s;
  text-decoration: none;
}
.btn-buy-wa:hover { background: #1ebe5d !important; transform: translateY(-1px); }

/* ═══════════════════════════════════════════════════════
   FAVORITE STAR BUTTON IN MODAL
   ═══════════════════════════════════════════════════════ */
.modal-fav-btn {
  background: none; border: 1.5px solid rgba(255,255,255,0.15);
  border-radius: 50%; width: 36px; height: 36px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: rgba(255,255,255,0.4);
  transition: color 0.2s, border-color 0.2s, transform 0.2s;
  margin-left: auto;
}
.modal-fav-btn:hover { color: #FFD700; border-color: #FFD700; }
.modal-fav-btn.active { color: #FFD700; border-color: #FFD700; }

/* ═══════════════════════════════════════════════════════
   REGALOS PAGE
   ═══════════════════════════════════════════════════════ */
.regalos-hero {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 100px 24px 60px;
  position: relative; overflow: hidden;
  background: radial-gradient(ellipse at 60% 40%, rgba(232,21,42,0.15) 0%, transparent 60%),
              var(--bg);
}
.regalos-bg { position:absolute;inset:0;pointer-events:none;z-index:0; }
.regalos-glow { position:absolute;top:20%;left:50%;transform:translateX(-50%);width:600px;height:600px;background:radial-gradient(circle,rgba(232,21,42,0.12) 0%,transparent 70%);border-radius:50%; }
.regalos-content { position:relative;z-index:1;max-width:780px;margin:0 auto;text-align:center; }
.regalos-title { font-family:var(--font-title);font-size:clamp(3rem,10vw,6rem);color:var(--white);line-height:1;margin:12px 0 4px; }
.regalos-fecha { font-family:var(--font-cond);font-size:1.1rem;letter-spacing:0.2em;color:var(--red);font-weight:700;margin-bottom:20px; }
.regalos-sub { color:var(--gray-light);font-size:1.05rem;line-height:1.7;margin-bottom:48px;max-width:580px;margin-left:auto;margin-right:auto; }
.regalos-coming-box {
  background:var(--bg2);border:1px solid var(--border);border-radius:16px;
  padding:40px 32px;margin-bottom:48px;
}
.regalos-coming-box h2 { font-family:var(--font-title);font-size:2.5rem;color:var(--white);margin:12px 0 8px; }
.regalos-coming-box p { color:var(--gray-light);line-height:1.6;margin-bottom:24px; }
.regalos-icon { font-size:2.5rem;letter-spacing:8px; }
.regalos-form { display:flex;gap:10px;max-width:420px;margin:0 auto; }
.regalos-form input { flex:1;padding:12px 16px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);color:var(--white);font-size:0.95rem; }
.regalos-form input:focus { outline:none;border-color:var(--red); }
.regalos-features { display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px;margin-top:16px; }
.regalo-feature { background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:28px 20px;text-align:center; }
.regalo-icon { font-size:2rem;display:block;margin-bottom:12px; }
.regalo-feature h3 { font-family:var(--font-cond);font-size:1.1rem;color:var(--white);letter-spacing:0.05em;margin-bottom:8px; }
.regalo-feature p { color:var(--gray);font-size:0.9rem;line-height:1.5; }

/* Admin sidebar new items */
.admin-nav-item.highlight { color: var(--red); }

/* ═══════════════════════════════════════════════════════
   PERFORMANCE OPTIMIZATIONS
   ═══════════════════════════════════════════════════════ */

/* GPU acceleration for animated elements */
.car-card,
.hero-slide,
.modal-box,
.lightbox,
.whatsapp-fab,
.carousel-arrow,
.navbar {
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Reduce paint area for cards */
.car-card {
  contain: layout style;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeSpeed;
}

/* Prevent layout shift on images */
.car-card-image img,
.modal-img-main img,
.hero-slide img {
  aspect-ratio: 16/10;
  object-fit: cover;
}

/* Faster modal open/close with GPU */
.modal-overlay {
  transform: translateZ(0);
}

/* Reduce repaints on hover */
.car-card:hover {
  transform: translateY(-4px) translateZ(0);
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE SYSTEM — Mobile First
   Breakpoints:
     1024px — tablet landscape
      768px — tablet portrait / large phone
      480px — phone
      360px — small phone
   ═══════════════════════════════════════════════════════════════ */

/* ── 1024px ─────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero-title { font-size: clamp(3.5rem, 9vw, 7rem); }

  .cars-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }

  .footer-inner {
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 32px;
  }

  .modal-box { max-width: 820px; }
}

/* ── 768px — Tablet ─────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Navbar */
  .nav-links, .nav-user { display: none; }
  .hamburger { display: flex; margin-left: auto; }
  .nav-inner { padding: 0 16px; gap: 16px; }

  /* Hero */
  .hero { min-height: 75vh; }
  .hero-content { padding: 60px 16px 48px; }
  .hero-title { font-size: clamp(3rem, 11vw, 5.5rem); }
  .hero-sub { font-size: 1rem; margin-bottom: 28px; }
  .hero-actions { gap: 12px; }
  .hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    width: 100%;
  }
  .hero-stat { padding: 12px 8px; text-align: center; }
  .hero-stat-divider { display: none; }
  .stat-num { font-size: 2.2rem; }
  .stat-label { font-size: 0.72rem; }

  /* Carousel */
  .hero-carousel { height: 220px; margin-top: 24px; }
  .carousel-arrow { width: 36px; height: 36px; font-size: 1.3rem; }
  .carousel-arrow-left  { left: 8px; }
  .carousel-arrow-right { right: 8px; }

  /* Sections */
  .section { padding: 56px 0; }
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 32px;
  }
  .section-title { font-size: clamp(2rem, 7vw, 3rem); }
  .container { padding: 0 16px; }

  /* Cars grid */
  .cars-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  .car-card-image { height: 170px; }
  .car-card-body { padding: 14px; }
  .car-model { font-size: 1.1rem; }
  .car-price { font-size: 1.3rem; }

  /* Marcas band */
  .marcas-band-inner { gap: 12px; }

  /* Page header */
  .page-header { padding: 40px 0 28px; }
  .page-title { font-size: clamp(2.5rem, 9vw, 4.5rem); }

  /* Filters */
  .filters-form { flex-direction: column; gap: 10px; }
  .filter-input, .filter-select { min-width: 100%; width: 100%; }
  .brand-pills { gap: 6px; }
  .brand-pill { font-size: 0.8rem; padding: 5px 12px; }

  /* Modal */
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal-box {
    grid-template-columns: 1fr;
    max-height: 92vh;
    border-radius: 20px 20px 0 0;
    width: 100%;
    max-width: 100%;
  }
  .modal-gallery {
    border-radius: 20px 20px 0 0;
    min-height: 240px;
    padding: 16px;
  }
  .modal-img-main { min-height: 200px; }
  .modal-img-main img { max-height: 220px; }
  .modal-info { padding: 20px 20px 32px; gap: 10px; }
  .modal-modelo { font-size: clamp(1.6rem, 6vw, 2.2rem); }
  .modal-price { font-size: 2rem; }
  .zoom-hint { display: none; }

  /* Fotos grid admin */
  .fotos-grid { grid-template-columns: repeat(3, 1fr); }

  /* Footer */
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-bottom: 32px;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 8px;
    text-align: center;
    padding: 16px;
  }
  .footer-brand p { max-width: 100%; }

  /* Acceso */
  .acceso-section { padding: 40px 16px; }
  .acceso-card { padding: 24px 20px; }

  /* Deseos */
  .admin-form-card { padding: 20px; }
  .form-row { grid-template-columns: 1fr; }

  /* Steps */
  .steps-grid { grid-template-columns: 1fr; gap: 16px; }
  .step { padding: 24px; }

  /* Flash messages */
  .flash-container {
    top: auto;
    bottom: 80px;
    left: 16px;
    right: 16px;
    max-width: 100%;
  }

  /* WhatsApp FAB */
  .whatsapp-fab { bottom: 20px; right: 16px; width: 52px; height: 52px; }

  /* Admin */
  .admin-sidebar { display: none; }
  .admin-main { padding: 20px 16px; }
  .admin-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .admin-stat-card { padding: 14px; }
  .admin-stat-num { font-size: 1.6rem; }
  .admin-table-wrap { font-size: 0.82rem; }
  .admin-table th, .admin-table td { padding: 10px 12px; }

  /* Regalos */
  .regalos-hero { padding: 80px 16px 48px; }
  .regalos-coming-box { padding: 28px 20px; }
  .regalos-form { flex-direction: column; }
  .regalos-features { grid-template-columns: 1fr; gap: 14px; }
}

/* ── 480px — Phone ───────────────────────────────────────────── */
@media (max-width: 480px) {

  /* Navbar */
  .nav-inner { height: 56px; }
  .logo-hw { font-size: 1.5rem; }
  .logo-collector { font-size: 0.75rem; }

  /* Hero */
  .hero { min-height: 65vh; }
  .hero-content { padding: 48px 16px 40px; }
  .hero-title { font-size: clamp(2.6rem, 13vw, 4rem); }
  .hero-sub { font-size: 0.95rem; max-width: 100%; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn-primary,
  .hero-actions .btn-ghost { width: 100%; justify-content: center; }
  .hero-stats { grid-template-columns: repeat(3, 1fr); }
  .stat-num { font-size: 1.9rem; }

  /* Carousel */
  .hero-carousel { height: 180px; margin-top: 16px; }
  .carousel-dots { bottom: 8px; }
  .carousel-dot { width: 6px; height: 6px; }
  .carousel-dot.active { width: 16px; }

  /* Cards — single column on very small phones */
  .cars-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .car-card-image { height: 150px; }
  .car-card-body { padding: 12px; }
  .car-brand { font-size: 0.7rem; }
  .car-model { font-size: 1rem; margin-bottom: 6px; }
  .car-price { font-size: 1.2rem; }
  .btn-card { font-size: 0.78rem; padding: 5px 10px; }

  /* Sections */
  .section { padding: 44px 0; }
  .section-title { font-size: clamp(1.8rem, 8vw, 2.5rem); }
  .container { padding: 0 14px; }

  /* Modal — full bottom sheet */
  .modal-overlay { padding: 0; }
  .modal-box {
    max-height: 96vh;
    border-radius: 16px 16px 0 0;
  }
  .modal-gallery { padding: 12px; min-height: 200px; }
  .modal-img-main { min-height: 180px; }
  .modal-img-main img { max-height: 190px; }
  .modal-info { padding: 16px 16px 28px; }
  .modal-modelo { font-size: 1.5rem; }
  .modal-price { font-size: 1.8rem; }
  .modal-close { top: 12px; right: 12px; width: 32px; height: 32px; }
  .modal-fav-btn { width: 32px; height: 32px; }
  .btn-buy-wa { padding: 12px 16px; font-size: 0.95rem; }
  .modal-thumb { width: 48px; height: 38px; }
  .gallery-nav { width: 34px; height: 34px; font-size: 1.2rem; }

  /* Page header */
  .page-title { font-size: clamp(2.2rem, 10vw, 3.5rem); }

  /* Lightbox arrows */
  .lb-prev { left: 4px; }
  .lb-next { right: 4px; }
  .lb-nav { width: 38px; height: 38px; font-size: 1.5rem; }

  /* Welcome modal */
  .welcome-box { border-radius: 16px; }
  .welcome-title { font-size: 1.7rem; }
  .welcome-form { padding: 0 16px; }
  .welcome-sub { padding: 8px 16px 20px; font-size: 0.88rem; }

  /* Footer */
  .footer { padding: 40px 0 0; }
  .footer-inner { padding: 0 14px 24px; gap: 24px; }

  /* Acceso */
  .acceso-section { padding: 32px 14px; }
  .acceso-card { padding: 20px 16px; }
  .acceso-card-header h2 { font-size: 1.7rem; }

  /* Forms */
  .fotos-grid { grid-template-columns: repeat(2, 1fr); }
  .admin-stats-grid { grid-template-columns: repeat(2, 1fr); }

  /* Regalos */
  .regalos-hero { padding: 72px 14px 40px; }
  .regalos-coming-box { padding: 24px 16px; }
  .regalos-coming-box h2 { font-size: 2rem; }
  .regalos-form { gap: 8px; }
  .regalos-form input { width: 100%; }
  .regalos-features { gap: 12px; }
  .regalo-feature { padding: 20px 16px; }

  /* Deseos page */
  .admin-form-card { padding: 20px 16px; }

  /* WhatsApp FAB — no interfere con botones */
  .whatsapp-fab { bottom: 16px; right: 12px; width: 48px; height: 48px; }
}

/* ── 360px — Small phones ────────────────────────────────────── */
@media (max-width: 360px) {
  .cars-grid { grid-template-columns: 1fr; }
  .hero-title { font-size: 2.4rem; }
  .container { padding: 0 12px; }
  .modal-info { padding: 14px 14px 24px; }
  .modal-modelo { font-size: 1.4rem; }
}

/* ── Touch improvements ──────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  /* Bigger tap targets on touch devices */
  .nav-link, .mobile-menu a { min-height: 44px; display: flex; align-items: center; }
  .btn-primary, .btn-ghost, .btn-nav { min-height: 48px; }
  .btn-card { min-height: 40px; display: inline-flex; align-items: center; }
  .carousel-arrow, .gallery-nav, .lb-nav { min-width: 44px; min-height: 44px; }
  .modal-close, .lb-close { min-width: 44px; min-height: 44px; }
  .brand-pill { min-height: 40px; display: inline-flex; align-items: center; }
  .modal-thumb { min-width: 44px; min-height: 44px; }

  /* Remove hover effects that feel weird on touch */
  .car-card:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--border);
  }
  .car-card:active {
    transform: scale(0.98);
    border-color: rgba(232,21,42,0.4);
  }

  /* Zoom hint not needed on touch */
  .zoom-hint { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   HERO V2 — Split layout full-width
   ═══════════════════════════════════════════════════════════════ */

.hero-v2 {
  position: relative;
  display: flex;
  min-height: 100vh;
  overflow: hidden;
  background: var(--bg);
}

/* ── Fondo decorativo ─────────────────────────────────────────── */
.hero-v2-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.hero-v2-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(232,21,42,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232,21,42,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at 50% 50%, black 30%, transparent 80%);
}

.hero-v2-glow-left {
  position: absolute;
  top: -10%; left: -10%;
  width: 60%; height: 120%;
  background: radial-gradient(ellipse at 20% 50%,
    rgba(232,21,42,0.14) 0%,
    rgba(232,21,42,0.05) 40%,
    transparent 70%);
}

.hero-v2-glow-right {
  position: absolute;
  top: -10%; right: -5%;
  width: 55%; height: 120%;
  background: radial-gradient(ellipse at 80% 50%,
    rgba(99,102,241,0.08) 0%,
    rgba(232,21,42,0.06) 40%,
    transparent 70%);
}

/* Líneas racing en extremos — rellena los laterales en pantallas anchas */
.hero-v2-stripe-left {
  position: absolute;
  top: 0; left: 0;
  width: 6px; height: 100%;
  background: linear-gradient(to bottom,
    transparent 0%,
    var(--red) 20%,
    var(--orange) 50%,
    var(--red) 80%,
    transparent 100%);
  opacity: 0.6;
}

.hero-v2-stripe-right {
  position: absolute;
  top: 0; right: 0;
  width: 6px; height: 100%;
  background: linear-gradient(to bottom,
    transparent 0%,
    var(--red) 20%,
    var(--orange) 50%,
    var(--red) 80%,
    transparent 100%);
  opacity: 0.6;
}

/* ── Columna izquierda — Texto ────────────────────────────────── */
.hero-v2-left {
  position: relative;
  z-index: 1;
  flex: 0 0 50%;
  display: flex;
  align-items: center;
  padding: 80px 0 80px 0;
}

.hero-v2-left-inner {
  width: 100%;
  max-width: 620px;
  margin-left: auto;
  padding: 0 48px 0 40px;
}

.hero-v2-title {
  font-family: var(--font-display);
  font-size: clamp(4rem, 6vw, 8rem);
  line-height: 0.88;
  color: var(--white);
  letter-spacing: 0.02em;
  margin: 16px 0 24px;
}

.hero-v2-sub {
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  color: var(--gray-light);
  max-width: 460px;
  line-height: 1.75;
  margin-bottom: 36px;
}

.hero-v2-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}

.hero-v2-stats {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 40px;
}

.hero-v2-stat {
  text-align: center;
  padding: 0 28px;
}

.hero-v2-stat:first-child { padding-left: 0; }

.hero-v2-scroll {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--font-cond);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--gray);
  animation: bounce 2s infinite;
}

/* ── Columna derecha — Carrusel ───────────────────────────────── */
.hero-v2-right {
  position: relative;
  z-index: 1;
  flex: 0 0 50%;
  display: flex;
  align-items: stretch;
  overflow: hidden;
}

/* Gradiente de fusión con el fondo en el borde izquierdo */
.hero-v2-right::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 80px; height: 100%;
  background: linear-gradient(to right, var(--bg), transparent);
  z-index: 10;
  pointer-events: none;
}

.hero-v2-carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.hero-v2-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.06);
  transition:
    opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-v2-slide.active {
  opacity: 1;
  transform: scale(1);
  z-index: 2;
}

.hero-v2-slide.prev {
  opacity: 0;
  transform: scale(0.97);
  z-index: 1;
}

.hero-v2-slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-v2-slide-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(10,10,12,0.3) 0%, transparent 30%, transparent 70%, rgba(10,10,12,0.5) 100%);
}

/* Badge "EN VIVO" */
.hero-v2-badge {
  position: absolute;
  top: 28px; right: 28px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(10,10,12,0.75);
  border: 1px solid rgba(232,21,42,0.4);
  backdrop-filter: blur(12px);
  padding: 8px 16px;
  border-radius: 100px;
  font-family: var(--font-cond);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--white);
}

.hero-v2-badge-dot {
  width: 7px; height: 7px;
  background: var(--red);
  border-radius: 50%;
  animation: livePulse 1.5s ease infinite;
  flex-shrink: 0;
}

@keyframes livePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.7); }
}

/* Sin carrusel */
.hero-v2-nocarousel {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: radial-gradient(ellipse at center, #1a1a2e 0%, #0a0a10 100%);
}

.hero-v2-deco-car {
  font-size: 6rem;
  filter: drop-shadow(0 0 40px rgba(232,21,42,0.4));
  animation: floatCar 3s ease-in-out infinite;
}

@keyframes floatCar {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}

/* ══ RESPONSIVE ══════════════════════════════════════════════════ */

/* Tablet: reducir tamaños pero mantener split */
@media (max-width: 1024px) {
  .hero-v2-left-inner {
    padding: 0 32px 0 28px;
  }
  .hero-v2-title {
    font-size: clamp(3.2rem, 5.5vw, 6rem);
  }
  .hero-v2-stat { padding: 0 18px; }
}

/* 768px: Stacked layout — texto arriba, carrusel abajo */
@media (max-width: 768px) {
  .hero-v2 {
    flex-direction: column;
    min-height: auto;
  }

  .hero-v2-stripe-left,
  .hero-v2-stripe-right { width: 3px; }

  .hero-v2-left {
    flex: none;
    padding: 72px 0 32px;
  }

  .hero-v2-left-inner {
    max-width: 100%;
    margin: 0;
    padding: 0 20px;
  }

  .hero-v2-title {
    font-size: clamp(3rem, 11vw, 5rem);
    margin: 12px 0 20px;
  }

  .hero-v2-sub { margin-bottom: 28px; max-width: 100%; }

  .hero-v2-actions { margin-bottom: 32px; }

  .hero-v2-stats { margin-bottom: 28px; }
  .hero-v2-stat { padding: 0 16px; }

  .hero-v2-scroll { align-items: center; }

  /* Carrusel abajo */
  .hero-v2-right {
    flex: none;
    height: 260px;
  }

  .hero-v2-right::before {
    /* En mobile cambiar gradiente a vertical */
    width: 100%; height: 40px;
    background: linear-gradient(to bottom, var(--bg), transparent);
    top: 0; left: 0;
  }

  .hero-v2-badge {
    top: 14px; right: 14px;
    padding: 6px 12px;
    font-size: 0.7rem;
  }
}

/* 480px: Ajustes para phone */
@media (max-width: 480px) {
  .hero-v2-left { padding: 60px 0 24px; }

  .hero-v2-left-inner { padding: 0 16px; }

  .hero-v2-title {
    font-size: clamp(2.6rem, 13vw, 4rem);
  }

  .hero-v2-sub { font-size: 0.92rem; }

  .hero-v2-actions {
    flex-direction: column;
    margin-bottom: 24px;
  }
  .hero-v2-actions .btn-primary,
  .hero-v2-actions .btn-ghost {
    width: 100%;
    justify-content: center;
  }

  .hero-v2-stats { gap: 0; }
  .hero-v2-stat { padding: 0 12px; }
  .stat-num { font-size: 1.8rem; }
  .stat-label { font-size: 0.68rem; }

  .hero-v2-right { height: 200px; }

  .hero-v2-badge { display: none; }
}

/* Ultra-wide: el hero se expande naturalmente y los laterales
   se llenan gracias al grid + stripes + glows */
@media (min-width: 1600px) {
  .hero-v2-left-inner {
    padding: 0 64px 0 80px;
    max-width: 700px;
  }
  .hero-v2-title { font-size: 9rem; }
  .hero-v2-glow-left { opacity: 1.2; }
  .hero-v2-stripe-left,
  .hero-v2-stripe-right { width: 8px; }
}

@media (min-width: 2000px) {
  .hero-v2-left-inner {
    padding: 0 80px 0 120px;
  }
  .hero-v2-title { font-size: 11rem; }
}

/* ═══════════════════════════════════════════════════════════════
   HERO V3 — Carousel arriba + título abajo
   ═══════════════════════════════════════════════════════════════ */

.hero-v3 { position: relative; background: var(--bg); overflow: hidden; }

/* ── Parte superior: carrusel ─────────────────────────────────── */
.hero-v3-top {
  position: relative;
  height: clamp(300px, 52vh, 600px);
  overflow: hidden;
}

.hero-v3-carousel {
  position: relative; width: 100%; height: 100%;
}

.hero-v3-slide {
  position: absolute; inset: 0;
  opacity: 0; transform: scale(1.05);
  transition: opacity 0.9s cubic-bezier(.4,0,.2,1), transform 0.9s cubic-bezier(.4,0,.2,1);
}
.hero-v3-slide.active { opacity: 1; transform: scale(1); z-index: 2; }
.hero-v3-slide.prev   { opacity: 0; transform: scale(.97); z-index: 1; }

.hero-v3-slide img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}

.hero-v3-slide-vignette {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(10,10,12,.15) 0%,
      transparent 30%,
      transparent 60%,
      rgba(10,10,12,.9) 100%);
}

/* Badge LIVE */
.hero-v3-live-badge {
  position: absolute; top: 20px; right: 20px; z-index: 10;
  display: flex; align-items: center; gap: 8px;
  background: rgba(10,10,12,.75); backdrop-filter: blur(12px);
  border: 1px solid rgba(232,21,42,.4);
  padding: 7px 14px; border-radius: 100px;
  font-family: var(--font-cond); font-size: .72rem;
  font-weight: 700; letter-spacing: .1em; color: var(--white);
}
.hero-v3-live-dot {
  width: 7px; height: 7px; background: var(--red); border-radius: 50%;
  animation: livePulse 1.5s ease infinite; flex-shrink: 0;
}

/* Corte diagonal que une el carrusel con el área de texto */
.hero-v3-diagonal {
  position: absolute; bottom: -2px; left: 0; right: 0; z-index: 10;
  height: 80px; pointer-events: none;
  background: var(--bg);
  clip-path: polygon(0 60%, 100% 0, 100% 100%, 0 100%);
}

/* Sin carousel */
.hero-v3-no-carousel {
  width: 100%; height: 100%;
  background: radial-gradient(ellipse at center, #1a1a2e 0%, #06060a 100%);
  display: flex; align-items: center; justify-content: center;
}
.hero-v3-no-carousel-inner {
  text-align: center; color: var(--gray);
  font-family: var(--font-cond); font-size: 1rem;
  letter-spacing: .08em;
}
.hero-v3-no-carousel-inner span { font-size: 4rem; display: block; margin-bottom: 12px; }

/* ── Parte inferior: contenido ───────────────────────────────── */
.hero-v3-bottom {
  position: relative;
  padding: 0 0 72px;
  overflow: hidden;
}

.hero-v3-bottom-bg { position: absolute; inset: 0; pointer-events: none; }
.hero-v3-glow {
  position: absolute; top: -20%; left: 50%; transform: translateX(-50%);
  width: 80%; height: 300px;
  background: radial-gradient(ellipse at center, rgba(232,21,42,.1) 0%, transparent 70%);
}
.hero-v3-stripes {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    -45deg, transparent, transparent 60px,
    rgba(232,21,42,.025) 60px, rgba(232,21,42,.025) 62px
  );
}

/* Líneas racing en extremos — para pantallas anchas */
.hero-v3-line-left,
.hero-v3-line-right {
  position: absolute; top: 0; width: 5px; height: 100%;
  background: linear-gradient(to bottom,
    var(--red) 0%, var(--orange) 50%, transparent 100%);
  opacity: .5; pointer-events: none;
}
.hero-v3-line-left  { left: 0; }
.hero-v3-line-right { right: 0; }

.hero-v3-content {
  max-width: 1180px; margin: 0 auto;
  padding: 48px 40px 0;
  position: relative; z-index: 1;
}

.hero-v3-title {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 10vw, 10rem);
  line-height: .88; color: var(--white);
  letter-spacing: .02em; margin: 16px 0 24px;
}

.hero-v3-sub {
  font-size: clamp(.95rem, 1.3vw, 1.12rem);
  color: var(--gray-light); max-width: 580px;
  line-height: 1.75; margin-bottom: 36px;
}

.hero-v3-actions {
  display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 48px;
}

.hero-v3-stats {
  display: flex; align-items: center;
}
.hero-v3-stat { text-align: center; padding: 0 32px; }
.hero-v3-stat:first-child { padding-left: 0; }

/* ── Responsive hero v3 ───────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero-v3-top { height: clamp(260px, 45vh, 500px); }
  .hero-v3-title { font-size: clamp(4rem, 9vw, 8rem); }
}

@media (max-width: 768px) {
  .hero-v3-top { height: 260px; }
  .hero-v3-diagonal { height: 50px; }
  .hero-v3-content { padding: 32px 20px 0; }
  .hero-v3-title { font-size: clamp(3.2rem, 13vw, 5.5rem); margin-bottom: 18px; }
  .hero-v3-sub { font-size: .95rem; margin-bottom: 28px; }
  .hero-v3-actions { margin-bottom: 32px; }
  .hero-v3-stat { padding: 0 18px; }
  .hero-v3-bottom { padding-bottom: 52px; }
  .hero-v3-line-left, .hero-v3-line-right { width: 3px; }
}

@media (max-width: 480px) {
  .hero-v3-top { height: 200px; }
  .hero-v3-diagonal { height: 36px; }
  .hero-v3-live-badge { display: none; }
  .hero-v3-content { padding: 24px 16px 0; }
  .hero-v3-title { font-size: clamp(2.8rem, 14vw, 4.5rem); }
  .hero-v3-actions { flex-direction: column; }
  .hero-v3-actions .btn-primary,
  .hero-v3-actions .btn-ghost { width: 100%; justify-content: center; }
  .hero-v3-stat { padding: 0 12px; }
  .hero-v3-bottom { padding-bottom: 40px; }
}

@media (min-width: 1600px) {
  .hero-v3-top { height: 60vh; }
  .hero-v3-title { font-size: 12rem; }
  .hero-v3-content { padding: 56px 80px 0; }
  .hero-v3-line-left, .hero-v3-line-right { width: 8px; }
}

/* ═══════════════════════════════════════════════════════════════
   PRECIO OFERTA — en cards y modal
   ═══════════════════════════════════════════════════════════════ */
.car-price-group { display: flex; flex-direction: column; gap: 2px; }
.car-price-original {
  font-family: var(--font-cond); font-size: .85rem;
  color: var(--gray); text-decoration: line-through;
}
.car-price-oferta { color: #ff6b1a !important; }

.car-badge-oferta {
  position: absolute; top: 10px; left: 10px;
  background: var(--orange); color: #fff;
  font-family: var(--font-cond); font-size: .72rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 6px;
  display: inline-block; width: auto; height: auto;
  z-index: 2; line-height: 1.2;
}
.car-badge-vistas {
  position: absolute; bottom: 10px; left: 10px;
  background: rgba(0,0,0,.7); color: var(--orange);
  font-family: var(--font-cond); font-size: .7rem; font-weight: 700;
  padding: 3px 8px; border-radius: 4px;
}

/* Modal precio original */
.modal-price-original {
  font-family: var(--font-cond); font-size: 1rem;
  color: var(--gray); text-decoration: line-through;
  margin-right: 8px;
}
.modal-vistas-badge {
  font-family: var(--font-cond); font-size: .78rem; font-weight: 700;
  color: var(--orange); background: rgba(255,107,26,.12);
  border: 1px solid rgba(255,107,26,.3);
  padding: 3px 10px; border-radius: 100px;
  margin-left: auto;
}

/* ═══════════════════════════════════════════════════════════════
   NOVEDADES
   ═══════════════════════════════════════════════════════════════ */
.novedades-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}
.novedades-grid-full { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }

.novedad-card {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.novedad-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,.5);
  border-color: rgba(232,21,42,.35);
}
.novedad-card-img { height: 200px; overflow: hidden; }
.novedad-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.novedad-card:hover .novedad-card-img img { transform: scale(1.05); }
.novedad-card-img-empty {
  height: 200px; background: var(--bg3);
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem; color: var(--border);
}
.novedad-card-body { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.novedad-fecha {
  font-family: var(--font-cond); font-size: .75rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--red);
}
.novedad-titulo {
  font-family: var(--font-cond); font-size: 1.25rem; font-weight: 700;
  color: var(--white); line-height: 1.2;
}
.novedad-preview { font-size: .88rem; color: var(--gray); line-height: 1.6; }

/* Artículo detalle */
.novedad-articulo { max-width: 780px; margin: 0 auto 40px; }
.novedad-articulo-img {
  width: 100%; max-height: 440px; object-fit: cover;
  border-radius: var(--radius-lg); margin-bottom: 32px;
  border: 1px solid var(--border);
}
.novedad-articulo-header { margin-bottom: 28px; }
.novedad-articulo-title {
  font-family: var(--font-display); font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: .95; color: var(--white); margin-top: 8px;
}
.novedad-articulo-body {
  font-size: 1.05rem; color: var(--gray-light); line-height: 1.8;
  white-space: pre-wrap;
}
.novedad-cta {
  display: flex; gap: 14px; flex-wrap: wrap;
  padding-top: 32px; border-top: 1px solid var(--border);
  max-width: 780px; margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════════
   GALERÍA INSTAGRAM GRID
   ═══════════════════════════════════════════════════════════════ */
.galeria-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 6px;
}
.galeria-item {
  position: relative; cursor: pointer;
  aspect-ratio: 1; overflow: hidden;
  background: var(--bg3);
  border-radius: var(--radius);
}
.galeria-item img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transition: transform .4s;
}
.galeria-item:hover img { transform: scale(1.08); }
.galeria-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.85) 0%, transparent 50%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 14px; opacity: 0; transition: opacity .25s;
}
.galeria-item:hover .galeria-overlay { opacity: 1; }
.galeria-marca {
  font-family: var(--font-cond); font-size: .7rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--red);
}
.galeria-modelo {
  font-family: var(--font-cond); font-size: 1rem; font-weight: 700;
  color: var(--white); line-height: 1.1;
}

@media (max-width: 480px) {
  .galeria-grid { grid-template-columns: repeat(3, 1fr); gap: 3px; }
  .galeria-grid .galeria-item { border-radius: 4px; }
}

/* ═══════════════════════════════════════════════════════════════
   NOSOTROS
   ═══════════════════════════════════════════════════════════════ */
.nosotros-grid {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px;
  align-items: start; margin-bottom: 80px;
}
.nosotros-p {
  color: var(--gray-light); line-height: 1.8; margin-bottom: 20px;
  font-size: 1.05rem;
}
.nosotros-stats {
  display: flex; gap: 32px; padding-top: 32px;
  border-top: 1px solid var(--border);
  margin-top: 32px;
}
.nosotros-stat { display: flex; flex-direction: column; gap: 4px; }
.nosotros-stat-num {
  font-family: var(--font-display); font-size: 2.8rem;
  color: var(--red); line-height: 1;
}
.nosotros-stat-label {
  font-family: var(--font-cond); font-size: .78rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--gray);
}
.nosotros-values {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.nosotros-value-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 24px;
  position: relative; overflow: hidden;
}
.nosotros-value-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: linear-gradient(90deg, var(--red), var(--orange));
}
.nosotros-value-icon { font-size: 1.8rem; display: block; margin-bottom: 10px; }
.nosotros-value-card h3 {
  font-family: var(--font-cond); font-size: 1.1rem; font-weight: 700;
  color: var(--white); margin-bottom: 8px;
}
.nosotros-value-card p { font-size: .88rem; color: var(--gray); line-height: 1.6; }
.nosotros-cta {
  text-align: center; padding: 64px 0 0;
  border-top: 1px solid var(--border);
}
.nosotros-cta p { color: var(--gray); margin: 16px 0 32px; font-size: 1rem; }
.nosotros-cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 768px) {
  .nosotros-grid { grid-template-columns: 1fr; gap: 40px; }
  .nosotros-values { grid-template-columns: 1fr 1fr; }
  .nosotros-stats { gap: 20px; }
}
@media (max-width: 480px) {
  .nosotros-values { grid-template-columns: 1fr; }
  .nosotros-stats { flex-direction: column; gap: 16px; }
}

/* ═══════════════════════════════════════════════════════════════
   ADMIN — Charts grid + extra styles
   ═══════════════════════════════════════════════════════════════ */
.admin-charts-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  margin-bottom: 32px;
}
.admin-chart-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 24px;
}
.admin-chart-title {
  font-family: var(--font-cond); font-size: 1rem; font-weight: 700;
  color: var(--white); letter-spacing: .04em; margin-bottom: 16px;
}
@media (max-width: 768px) {
  .admin-charts-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   COMPARAR AUTOS
   ═══════════════════════════════════════════════════════════════ */

/* Botón comparar en cards */
.compare-btn {
  position: absolute; top: 10px; left: 10px; z-index: 5;
  width: 28px; height: 28px;
  background: rgba(10,10,12,.8); backdrop-filter: blur(8px);
  border: 1.5px solid var(--border); border-radius: 6px;
  color: var(--gray); font-size: .85rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s;
}
.compare-btn:hover { border-color: var(--red); color: var(--red); }
.compare-btn.selected { background: var(--red); border-color: var(--red); color: #fff; }

/* Barra inferior */
.compare-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 990;
  background: var(--bg2); border-top: 2px solid var(--red);
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  backdrop-filter: blur(12px);
}
.compare-bar.visible { transform: translateY(0); }
.compare-bar-inner {
  max-width: 1180px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; gap: 20px;
}
.compare-bar-items { display: flex; gap: 12px; flex: 1; }
.compare-bar-item {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 8px 12px; min-width: 160px;
}
.compare-bar-item img { width: 48px; height: 36px; object-fit: contain; }
.compare-bar-item-info { font-family: var(--font-cond); }
.compare-bar-item-marca { font-size: .7rem; color: var(--red); font-weight: 700; letter-spacing: .06em; display: block; }
.compare-bar-item-modelo { font-size: .9rem; color: var(--white); font-weight: 700; }
.compare-bar-item-remove {
  margin-left: auto; background: none; border: none; cursor: pointer;
  color: var(--gray); font-size: 1rem; padding: 2px 6px;
  transition: color .2s;
}
.compare-bar-item-remove:hover { color: var(--red); }
.compare-bar-actions { display: flex; gap: 10px; flex-shrink: 0; }

/* Modal comparar */
.compare-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,.9); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; opacity: 0; pointer-events: none;
  transition: opacity .3s;
}
.compare-overlay.open { opacity: 1; pointer-events: all; }
.compare-modal {
  position: relative; background: var(--bg2);
  border: 1px solid var(--border); border-radius: 20px;
  width: 100%; max-width: 900px; max-height: 90vh;
  overflow-y: auto; padding: 36px 32px;
  transform: translateY(24px) scale(.97);
  transition: transform .3s;
}
.compare-overlay.open .compare-modal { transform: none; }
.compare-title {
  font-family: var(--font-display); font-size: 2.5rem;
  color: var(--white); margin-bottom: 28px; letter-spacing: .02em;
}
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.compare-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
}
.compare-card-img { height: 200px; background: var(--bg3); display: flex; align-items: center; justify-content: center; }
.compare-card-img img { max-width: 100%; max-height: 100%; object-fit: contain; padding: 12px; }
.compare-card-body { padding: 20px; }
.compare-card-brand { font-family: var(--font-cond); font-size: .8rem; font-weight: 700; letter-spacing: .1em; color: var(--red); text-transform: uppercase; }
.compare-card-model { font-family: var(--font-cond); font-size: 1.4rem; font-weight: 700; color: var(--white); margin: 6px 0; }
.compare-card-table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.compare-card-table td { padding: 7px 0; border-bottom: 1px solid var(--border); font-size: .88rem; }
.compare-card-table td:first-child { color: var(--gray); font-family: var(--font-cond); font-weight: 700; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; width: 40%; }
.compare-card-table td:last-child { color: var(--white); }
.compare-price { font-family: var(--font-display); font-size: 1.8rem; color: var(--yellow); margin-top: 14px; }

@media (max-width: 600px) {
  .compare-grid { grid-template-columns: 1fr; }
  .compare-modal { padding: 24px 16px; }
  .compare-bar-inner { flex-direction: column; gap: 12px; padding: 12px 16px; }
}

/* ═══════════════════════════════════════════════════════════════
   SISTEMA DE LEALTAD — RANKING TABLE
   ═══════════════════════════════════════════════════════════════ */

.loyalty-section {
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg2) 40%, var(--bg) 100%);
  position: relative;
  overflow: hidden;
}
.loyalty-section::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 10% 50%, rgba(232,21,42,.07) 0%, transparent 60%),
    radial-gradient(ellipse at 90% 50%, rgba(255,200,0,.05) 0%, transparent 60%);
}

/* Header split layout */
.loyalty-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
  margin-bottom: 48px;
}

.loyalty-title {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 7vw, 7rem);
  line-height: .9;
  color: var(--white);
  margin: 12px 0 20px;
}
.loyalty-title-accent { color: var(--yellow); }

.loyalty-subtitle {
  color: var(--gray-light);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 480px;
  margin-bottom: 28px;
}

.my-stars-chip {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255,200,0,.1);
  border: 1px solid rgba(255,200,0,.3);
  border-radius: 100px;
  padding: 10px 20px;
  font-family: var(--font-cond);
  font-size: .9rem; font-weight: 700;
  color: var(--gray-light);
}
.my-stars-num {
  font-size: 1.2rem;
  color: var(--yellow);
}
.loyalty-cta-btn { display: inline-flex; }

/* PREMIOS */
.loyalty-prizes {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px;
  position: relative;
  overflow: hidden;
}
.loyalty-prizes::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--yellow), var(--orange), var(--red));
}

.prizes-title {
  font-family: var(--font-cond);
  font-size: 1.2rem; font-weight: 700;
  letter-spacing: .08em; color: var(--white);
  margin-bottom: 20px;
}

.prizes-list { display: flex; flex-direction: column; gap: 10px; }

.prize-item {
  display: flex; align-items: center; gap: 14px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  transition: border-color .2s;
}
.prize-item.prize-unlocked {
  border-color: rgba(255,200,0,.5);
  background: rgba(255,200,0,.05);
}

.prize-stars {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--yellow);
  min-width: 60px;
  text-align: center;
  line-height: 1;
}
.prize-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.prize-titulo {
  font-family: var(--font-cond);
  font-size: 1rem; font-weight: 700;
  color: var(--white);
}
.prize-desc { font-size: .8rem; color: var(--gray); }
.prize-badge-locked { font-size: 1rem; opacity: .5; }
.prize-badge-unlocked { font-size: 1.2rem; }

/* RANKING TABLE */
.ranking-table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
}

.ranking-table {
  width: 100%;
  border-collapse: collapse;
}

.ranking-table thead tr {
  background: rgba(255,200,0,.07);
  border-bottom: 2px solid var(--border);
}
.ranking-table thead th {
  font-family: var(--font-cond);
  font-size: .8rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--gray);
  padding: 16px 20px;
  text-align: left;
}
.rank-bar-th { width: 35%; }

.rank-row {
  border-bottom: 1px solid rgba(255,255,255,.04);
  transition: background .15s;
}
.rank-row:hover { background: rgba(255,255,255,.03); }
.rank-row:last-child { border-bottom: none; }

/* Top 3 rows get a subtle glow */
.rank-row.rank-top:nth-child(1) { background: rgba(255,215,0,.04); }
.rank-row.rank-top:nth-child(2) { background: rgba(192,192,192,.03); }
.rank-row.rank-top:nth-child(3) { background: rgba(205,127,50,.03); }

/* Your own row */
.rank-row.rank-me {
  background: rgba(232,21,42,.06) !important;
  border-left: 3px solid var(--red);
}

.rank-row td { padding: 16px 20px; vertical-align: middle; }

.rank-pos { width: 60px; }
.rank-trophy { font-size: 1.6rem; display: block; text-align: center; }
.gold-trophy   { filter: drop-shadow(0 0 8px rgba(255,215,0,.8)); }
.silver-trophy { filter: drop-shadow(0 0 6px rgba(192,192,192,.6)); }
.bronze-trophy { filter: drop-shadow(0 0 6px rgba(205,127,50,.5)); }
.rank-num-plain {
  font-family: var(--font-cond);
  font-size: 1.1rem; font-weight: 700;
  color: var(--gray);
  display: block; text-align: center;
}

.rank-name-cell { display: flex; align-items: center; gap: 10px; }
.rank-name {
  font-family: var(--font-cond);
  font-size: 1.1rem; font-weight: 700;
  color: var(--white);
}
.rank-you-badge {
  font-family: var(--font-cond);
  font-size: .65rem; font-weight: 700;
  letter-spacing: .1em;
  background: var(--red);
  color: #fff;
  padding: 2px 8px; border-radius: 100px;
}

.rank-stars-cell {
  display: flex; align-items: center; gap: 6px;
}
.rank-stars-num {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--yellow);
}
.rank-star-icon { font-size: 1rem; }

.rank-bar-cell { padding-right: 28px; }
.rank-progress-track {
  height: 8px;
  background: var(--bg3);
  border-radius: 100px;
  overflow: hidden;
}
.rank-progress-fill {
  height: 100%;
  border-radius: 100px;
  background: linear-gradient(90deg, var(--yellow) 0%, var(--orange) 60%, var(--red) 100%);
  width: 0%;  /* starts 0, animated via JS */
  transition: width 1s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 0 8px rgba(255,200,0,.4);
}

/* Empty state */
.ranking-empty {
  padding: 80px 40px;
  text-align: center;
}
.ranking-empty-icon { font-size: 4rem; display: block; margin-bottom: 16px; }
.ranking-empty h3 {
  font-family: var(--font-display);
  font-size: 2rem; color: var(--white); margin-bottom: 10px;
}
.ranking-empty p { color: var(--gray); margin-bottom: 24px; }

/* ── Badge estrellas en cards ── */
.car-badge-estrellas {
  position: absolute; top: 10px; left: 10px;
  background: rgba(0,0,0,.75); backdrop-filter: blur(8px);
  color: var(--yellow);
  font-family: var(--font-cond); font-size: .72rem; font-weight: 700;
  padding: 3px 8px; border-radius: 4px;
  border: 1px solid rgba(255,200,0,.3);
}

/* ── ADMIN — Usuarios & Compras ── */
.usuarios-table td { vertical-align: middle; }

.rank-cell { text-align: center; }
.rank-medal { font-size: 1.4rem; }
.rank-number {
  font-family: var(--font-cond); font-size: 1rem; font-weight: 700;
  color: var(--gray);
}

.mini-stars { margin-top: 3px; }
.mini-star { color: var(--yellow); font-size: .8rem; }

.email-chip {
  font-size: .78rem; color: var(--gray);
  background: var(--bg3); padding: 2px 8px; border-radius: 4px;
  font-family: monospace;
}

.estrellas-big {
  font-family: var(--font-display); font-size: 1.3rem;
  color: var(--yellow);
}

.fecha-chip { font-size: .8rem; color: var(--gray); }

/* Inline purchase form */
.btn-compra-toggle {
  background: rgba(255,200,0,.1);
  border: 1px solid rgba(255,200,0,.3);
  color: var(--yellow);
  font-family: var(--font-cond); font-size: .85rem; font-weight: 700;
  padding: 7px 14px; border-radius: 8px; cursor: pointer;
  transition: all .2s; white-space: nowrap;
}
.btn-compra-toggle:hover,
.btn-compra-toggle.active {
  background: var(--yellow); color: #000;
}

.compra-form-expanded {
  margin-top: 12px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  min-width: 420px;
}

.compra-select {
  width: 100%;
  background: var(--bg2); border: 1px solid var(--border);
  color: var(--white); border-radius: 8px;
  padding: 9px 12px; font-size: .85rem;
  margin-bottom: 10px;
}
.compra-select:focus { border-color: var(--yellow); outline: none; }

.compra-qty-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.compra-qty-row label {
  font-family: var(--font-cond); font-size: .8rem; font-weight: 700;
  color: var(--gray);
}
.compra-qty {
  width: 70px;
  background: var(--bg2); border: 1px solid var(--border);
  color: var(--white); border-radius: 8px;
  padding: 7px 10px; font-size: .9rem; text-align: center;
}
.compra-qty:focus { border-color: var(--yellow); outline: none; }

.btn-ya-pago {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff; border: none; border-radius: 8px;
  font-family: var(--font-cond); font-size: .9rem; font-weight: 700;
  padding: 8px 18px; cursor: pointer;
  transition: opacity .2s; white-space: nowrap;
}
.btn-ya-pago:hover { opacity: .85; }
.btn-ya-pago:disabled { opacity: .4; cursor: not-allowed; }

.btn-cancelar-compra {
  background: transparent; border: 1px solid var(--border);
  color: var(--gray); border-radius: 8px;
  font-size: .85rem; padding: 7px 12px; cursor: pointer;
  transition: all .2s;
}
.btn-cancelar-compra:hover { border-color: var(--red); color: var(--red); }

/* ── ADMIN — Premios grid ── */
.premios-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
.premio-admin-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 24px;
  position: relative; overflow: hidden;
  transition: border-color .2s;
}
.premio-admin-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--yellow), var(--orange));
}
.premio-admin-card.inactivo { opacity: .5; }
.premio-admin-card.inactivo::before { background: var(--border); }
.premio-admin-stars {
  font-family: var(--font-display); font-size: 2rem; color: var(--yellow);
  margin-bottom: 10px;
}
.premio-admin-titulo {
  font-family: var(--font-cond); font-size: 1.2rem; font-weight: 700;
  color: var(--white); margin-bottom: 6px;
}
.premio-admin-desc { font-size: .85rem; color: var(--gray); margin-bottom: 14px; }
.premio-admin-status { margin-bottom: 14px; }
.premio-admin-actions { display: flex; gap: 8px; }

/* ── ADMIN — Vendidos chips ── */
.car-brand-chip {
  font-family: var(--font-cond); font-size: .72rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--red); background: rgba(232,21,42,.1);
  padding: 2px 7px; border-radius: 4px; margin-right: 6px;
}
.car-model-text { font-weight: 600; color: var(--white); }
.precio-chip {
  background: rgba(74,222,128,.1); color: #4ade80;
  font-family: var(--font-cond); font-size: .85rem; font-weight: 700;
  padding: 2px 8px; border-radius: 4px;
}
.badge-star {
  background: rgba(255,200,0,.12); color: var(--yellow);
  border: 1px solid rgba(255,200,0,.25);
  font-family: var(--font-cond); font-size: .82rem; font-weight: 700;
  padding: 3px 10px; border-radius: 4px; display: inline-block;
}

/* ── Responsive Loyalty ── */
@media (max-width: 900px) {
  .loyalty-header { grid-template-columns: 1fr; gap: 36px; }
  .loyalty-title { font-size: clamp(3rem, 10vw, 5rem); }
}
@media (max-width: 600px) {
  .ranking-table thead th:last-child,
  .ranking-table td:last-child { display: none; }
  .loyalty-title { font-size: clamp(2.8rem, 13vw, 4.5rem); }
  .rank-row td { padding: 12px 12px; }
  .compra-form-expanded { min-width: unset; }
  .compra-qty-row { flex-direction: column; align-items: flex-start; }
}

/* ═══════════════════════════════════════════════════════════════
   ADMIN — MOBILE RESPONSIVE (v8)
   ═══════════════════════════════════════════════════════════════ */

.admin-mobile-header {
  display: none;
  position: fixed; top: 0; left: 0; right: 0; z-index: 1001;
  height: 56px; background: #0a0a0f;
  border-bottom: 1px solid var(--border);
  align-items: center; justify-content: space-between;
  padding: 0 16px;
}
.admin-mobile-logo { display: flex; align-items: baseline; gap: 4px; }
.admin-hamburger {
  background: none; border: none; cursor: pointer; padding: 6px;
  display: flex; flex-direction: column; gap: 5px; align-items: center;
}
.admin-hamburger span {
  display: block; width: 24px; height: 2px;
  background: var(--white); border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}
.admin-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.admin-hamburger.open span:nth-child(2) { opacity: 0; }
.admin-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.admin-overlay {
  display: none; position: fixed; inset: 0; z-index: 999;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(2px);
}
.admin-overlay.open { display: block; }

.admin-sidebar-close {
  display: none; background: none; border: none;
  color: var(--gray); font-size: 1.4rem; cursor: pointer;
  position: absolute; right: 12px; top: 14px;
  line-height: 1; padding: 4px 8px; border-radius: 4px;
}
.admin-sidebar-close:hover { color: var(--white); background: var(--surface); }

@media (max-width: 768px) {
  .admin-mobile-header { display: flex; }
  .admin-body .admin-layout { padding-top: 56px; }
  .admin-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 1000;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
    width: 260px; height: 100vh;
    display: flex !important; /* override the display:none */
    overflow-y: auto;
  }
  .admin-sidebar.open { transform: translateX(0); box-shadow: 4px 0 32px rgba(0,0,0,0.5); }
  .admin-sidebar-close { display: block; }
  .admin-sidebar-logo { padding-right: 48px; }
  .admin-main { padding: 20px 14px; }
  .admin-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .admin-stat-card { padding: 14px; }
  .admin-stat-num { font-size: 1.6rem; }
  .admin-page-header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .admin-page-title { font-size: 1.6rem; }
  .admin-table-wrap { font-size: 0.8rem; overflow-x: auto; }
  .admin-table th, .admin-table td { padding: 9px 10px; white-space: nowrap; }
  .admin-actions-row { flex-wrap: wrap; gap: 6px; }
}

/* ═══════════════════════════════════════════════════════════════
   RANKING — PODIUM + MINI TABLE (v8)
   ═══════════════════════════════════════════════════════════════ */

.ranking-wrap { max-width: 700px; margin: 0 auto; }

.ranking-podium {
  display: flex; gap: 12px; justify-content: center; align-items: flex-end;
  margin-bottom: 24px; padding: 0 8px;
}
.podium-card {
  flex: 1; max-width: 200px; min-width: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 20px 12px 16px;
  text-align: center; position: relative;
  transition: transform 0.2s, border-color 0.2s;
}
.podium-card:hover { transform: translateY(-3px); }
.podium-1 {
  border-color: rgba(255, 214, 10, 0.4);
  background: linear-gradient(135deg, #1e1e28 0%, #1a1a10 100%);
  transform: translateY(-12px);
}
.podium-1:hover { transform: translateY(-15px); }
.podium-2 { border-color: rgba(192,192,210,0.3); }
.podium-3 { border-color: rgba(205,127,50,0.3); }
.podium-me { border-color: var(--red) !important; }
.podium-trophy { font-size: 2.2rem; line-height: 1; margin-bottom: 10px; display: block; }
.podium-1 .podium-trophy { font-size: 2.8rem; }
.podium-name {
  font-family: var(--font-cond); font-weight: 700; font-size: 1rem;
  color: var(--white); letter-spacing: 0.03em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.podium-stars {
  font-family: var(--font-display); font-size: 1.3rem; color: var(--yellow);
  margin-top: 6px; display: block;
}
.podium-1 .podium-stars { font-size: 1.6rem; }
.podium-you {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: var(--red); color: var(--white);
  font-family: var(--font-cond); font-size: 0.65rem; font-weight: 700;
  letter-spacing: 0.08em; padding: 2px 8px; border-radius: 20px;
}

.ranking-rest { margin-top: 4px; }
.ranking-mini-table { width: 100%; border-collapse: collapse; }
.ranking-mini-table tr {
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.ranking-mini-table tr:last-child { border-bottom: none; }
.ranking-mini-table tr:hover { background: var(--surface); }
.ranking-mini-table tr.rank-me { background: rgba(232,21,42,0.06); }
.rmt-pos {
  font-family: var(--font-cond); font-size: 0.85rem;
  color: var(--gray); padding: 10px 14px; width: 36px;
}
.rmt-name {
  font-family: var(--font-cond); font-size: 0.95rem; color: var(--gray-light);
  padding: 10px 8px; font-weight: 600;
}
.rmt-stars {
  font-family: var(--font-cond); font-size: 0.9rem; color: var(--yellow);
  padding: 10px 14px; text-align: right; white-space: nowrap;
}
.rank-you-badge {
  background: var(--red); color: white; font-size: 0.6rem;
  padding: 1px 5px; border-radius: 10px; letter-spacing: 0.05em;
  vertical-align: middle; margin-left: 4px;
}

@media (max-width: 600px) {
  .ranking-podium { gap: 8px; }
  .podium-card { padding: 14px 8px 12px; }
  .podium-trophy { font-size: 1.8rem; }
  .podium-1 .podium-trophy { font-size: 2.2rem; }
  .podium-name { font-size: 0.85rem; }
  .podium-stars { font-size: 1.1rem; }
}

/* ═══════════════════════════════════════════════════════════════
   ACCESO PAGE — Cleaned up (v8)
   ═══════════════════════════════════════════════════════════════ */

.acceso-hero-text {
  text-align: center; margin-bottom: 32px;
}
.acceso-hero-text p {
  color: var(--gray); font-family: var(--font-cond);
  font-size: 1rem; margin-top: 6px; letter-spacing: 0.04em;
}
.acceso-switch {
  text-align: center; margin-top: 16px;
  color: var(--gray); font-family: var(--font-cond); font-size: 0.9rem;
}
.link-btn {
  background: none; border: none; cursor: pointer;
  color: var(--red); font-family: inherit; font-size: inherit;
  font-weight: 700; text-decoration: underline; padding: 0;
}
.link-btn:hover { color: var(--orange); }
.label-hint {
  color: var(--gray); font-size: 0.8rem; font-weight: 400;
}
.acceso-nota {
  text-align: center; color: var(--gray);
  font-family: var(--font-cond); font-size: 0.85rem;
  margin-top: 20px; max-width: 380px; margin-left: auto; margin-right: auto;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════
   MISC IMPROVEMENTS (v8)
   ═══════════════════════════════════════════════════════════════ */

/* Card price group — better oferta display */
.car-price-group { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.car-price-original {
  text-decoration: line-through; color: var(--gray);
  font-size: 0.9em; font-family: var(--font-cond);
}
.car-price-oferta { color: var(--orange) !important; }

/* Footer responsive */
@media (max-width: 600px) {
  .footer-inner { flex-direction: column; gap: 24px; }
  .footer-links, .footer-info { width: 100%; }
}

/* Improve flash messages on mobile */
@media (max-width: 480px) {
  .flash-container { top: 60px; left: 12px; right: 12px; }
  .flash { font-size: 0.9rem; padding: 12px 14px; }
}

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* Better focus outline for accessibility */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--red); outline-offset: 2px; border-radius: 2px;
}

/* Agotado state on cat-item row */
.cat-item.is-agotado .cat-item-model { opacity: .4; }
.cat-item.is-agotado .cat-item-brand { opacity: .4; }
.cat-item.is-agotado::after {
  content: 'AGOTADO';
  position: absolute; top: 50%; right: 24px;
  transform: translateY(-50%);
  font-family: 'Barlow Condensed', var(--font-cond), sans-serif;
  font-size: .65rem; font-weight: 700; letter-spacing: .12em;
  color: #333; border: 1px solid #222; padding: 3px 10px;
  border-radius: 3px; text-transform: uppercase; pointer-events: none;
}

/* ═══ PREMIOS SHOWCASE ═══ */
.premios-showcase {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  position: relative;
}

.premio-showcase-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}

.premio-showcase-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 0 1px rgba(232,21,42,0.3);
  border-color: rgba(232,21,42,0.4);
}

.premio-showcase-card.premio-unlocked {
  border-color: rgba(255,214,10,0.5);
  box-shadow: 0 0 30px rgba(255,214,10,0.1);
}

.premio-showcase-card.premio-unlocked:hover {
  box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 40px rgba(255,214,10,0.15);
}

.premio-showcase-card.premio-grand {
  border-color: rgba(232,21,42,0.4);
}

.premio-showcase-card.premio-grand:hover {
  border-color: var(--red);
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 50px rgba(232,21,42,0.2);
}

.premio-showcase-glow {
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  width: 200%;
  height: 200%;
  background: radial-gradient(ellipse at center, rgba(255,214,10,0.04) 0%, transparent 50%);
  pointer-events: none;
}

.premio-showcase-card.premio-grand .premio-showcase-glow {
  background: radial-gradient(ellipse at center, rgba(232,21,42,0.06) 0%, transparent 50%);
}

.premio-showcase-img {
  position: relative;
  height: 220px;
  background: radial-gradient(ellipse at center, #1a1a2e 0%, #0a0a10 100%);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.premio-showcase-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}

.premio-showcase-card:hover .premio-showcase-img img {
  transform: scale(1.06);
}

.premio-showcase-placeholder {
  font-size: 4rem;
  filter: drop-shadow(0 0 20px rgba(255,214,10,0.4));
}

.premio-showcase-card.premio-grand .premio-showcase-placeholder {
  font-size: 5rem;
  filter: drop-shadow(0 0 30px rgba(232,21,42,0.5));
}

.premio-showcase-stars-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(0,0,0,0.8);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,214,10,0.4);
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--yellow);
  padding: 6px 14px;
  border-radius: 100px;
  letter-spacing: 0.03em;
}

.premio-showcase-unlocked-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(34,197,94,0.9);
  color: #fff;
  font-family: var(--font-cond);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 5px 12px;
  border-radius: 100px;
}

.premio-showcase-body {
  padding: 24px;
}

.premio-showcase-titulo {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--white);
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}

.premio-showcase-card.premio-grand .premio-showcase-titulo {
  font-size: 2rem;
  color: var(--red);
}

.premio-showcase-desc {
  font-size: 0.88rem;
  color: var(--gray);
  line-height: 1.6;
  margin-bottom: 14px;
}

.premio-showcase-progress {
  margin-top: 12px;
}

.premio-progress-track {
  height: 6px;
  background: var(--bg3);
  border-radius: 100px;
  overflow: hidden;
}

.premio-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--yellow), var(--orange), var(--red));
  border-radius: 100px;
  transition: width 0.8s ease;
  box-shadow: 0 0 8px rgba(255,200,0,0.4);
}

.premio-progress-text {
  display: block;
  margin-top: 6px;
  font-family: var(--font-cond);
  font-size: 0.78rem;
  color: var(--gray);
  font-weight: 600;
}

@media (max-width: 768px) {
  .premios-showcase {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .premio-showcase-img {
    height: 180px;
  }
  .premio-showcase-body {
    padding: 18px;
  }
  .premio-showcase-titulo {
    font-size: 1.4rem;
  }
  .premio-showcase-card.premio-grand .premio-showcase-titulo {
    font-size: 1.6rem;
  }
}

/* ═══ HERO FEATURED CAR ROTATOR ═══ */
.hero-v3-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}

@media (min-width: 1024px) {
  .hero-v3-split {
    grid-template-columns: 1fr 420px;
    gap: 60px;
  }
}
@media (min-width: 1400px) {
  .hero-v3-split {
    grid-template-columns: 1fr 460px;
  }
}

.hero-v3-left { min-width: 0; }

/* ── Wrap & ambient glow ── */
.hero-featured-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  perspective: 800px;
}

.hero-featured-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 360px;
  height: 360px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(232,21,42,0.15) 0%, rgba(255,107,26,0.08) 40%, transparent 70%);
  border-radius: 50%;
  filter: blur(40px);
  animation: hfGlowPulse 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes hfGlowPulse {
  0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
}

/* ── The card ── */
.hero-featured-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 380px;
  background: linear-gradient(165deg, rgba(22,22,32,0.95) 0%, rgba(14,14,20,0.98) 100%);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 20px;
  overflow: hidden;
  animation: hfFloat 6s ease-in-out infinite;
  transform-style: preserve-3d;
  box-shadow:
    0 4px 20px rgba(0,0,0,0.4),
    0 20px 60px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.04);
  transition: box-shadow 0.4s;
}

.hero-featured-card:hover {
  box-shadow:
    0 4px 20px rgba(0,0,0,0.4),
    0 30px 80px rgba(0,0,0,0.4),
    0 0 40px rgba(232,21,42,0.12),
    inset 0 1px 0 rgba(255,255,255,0.06);
  animation-play-state: paused;
}

@keyframes hfFloat {
  0%, 100% { transform: translateY(0) rotateX(0); }
  50% { transform: translateY(-12px) rotateX(0.5deg); }
}

/* ── Shimmer border effect ── */
.hero-featured-shimmer {
  position: absolute;
  inset: -1px;
  border-radius: 21px;
  z-index: -1;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(232,21,42,0.5) 40deg,
    rgba(255,214,10,0.4) 80deg,
    transparent 120deg,
    transparent 360deg
  );
  animation: hfShimmer 6s linear infinite;
  opacity: 0;
  transition: opacity 0.4s;
}

.hero-featured-card:hover .hero-featured-shimmer {
  opacity: 1;
}

@keyframes hfShimmer {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ── Badge ── */
.hero-featured-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  background: var(--red);
  color: #fff;
  font-family: var(--font-cond);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 5px 12px;
  border-radius: 100px;
  box-shadow: 0 2px 12px rgba(232,21,42,0.5);
}

/* ── Image area ── */
.hero-featured-img-wrap {
  position: relative;
  height: 220px;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, rgba(30,30,50,1) 0%, rgba(10,10,14,1) 100%);
}

.hero-featured-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.hero-featured-card:hover .hero-featured-img {
  transform: scale(1.08);
}

.hero-featured-img-reflection {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60%;
  background: linear-gradient(to top, rgba(14,14,20,0.95) 0%, transparent 100%);
  pointer-events: none;
}

/* ── Info ── */
.hero-featured-info {
  padding: 20px 22px 8px;
}

.hero-featured-brand {
  font-family: var(--font-cond);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--red);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero-featured-model {
  font-family: var(--font-display);
  font-size: 1.7rem;
  color: var(--white);
  line-height: 1;
  margin: 4px 0 8px;
  letter-spacing: 0.02em;
}

.hero-featured-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.hero-featured-year,
.hero-featured-serie {
  font-family: var(--font-cond);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gray);
  background: rgba(255,255,255,0.04);
  padding: 3px 10px;
  border-radius: 100px;
  letter-spacing: 0.04em;
}

.hero-featured-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hero-featured-price {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--yellow);
}

.hf-price-old {
  font-family: var(--font-cond);
  font-size: 0.85rem;
  color: var(--gray);
  text-decoration: line-through;
  margin-right: 6px;
  font-weight: 400;
}

.hero-featured-stars {
  font-family: var(--font-cond);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--yellow);
  background: rgba(255,214,10,0.08);
  padding: 4px 12px;
  border-radius: 100px;
}

/* ── CTA button ── */
.hero-featured-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 22px;
  margin: 12px 22px 20px;
  background: linear-gradient(135deg, var(--red) 0%, #c01020 100%);
  color: #fff;
  font-family: var(--font-cond);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 12px;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 16px rgba(232,21,42,0.3);
}

.hero-featured-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(232,21,42,0.5);
}

.hero-featured-cta svg {
  transition: transform 0.3s;
}
.hero-featured-cta:hover svg {
  transform: translateX(4px);
}

/* ── Dots ── */
.hero-featured-dots {
  display: flex;
  gap: 8px;
  margin-top: 18px;
  justify-content: center;
  z-index: 1;
}

.hf-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 0.3s;
}

.hf-dot.active {
  background: var(--red);
  width: 24px;
  border-radius: 100px;
  box-shadow: 0 0 10px rgba(232,21,42,0.5);
}

/* ── Entry / Exit animations ── */
.hero-featured-card.hf-enter {
  animation: hfEnter 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

.hero-featured-card.hf-exit {
  animation: hfExit 0.35s cubic-bezier(0.55, 0, 1, 0.45) forwards;
}

@keyframes hfEnter {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.92) rotateX(4deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotateX(0);
  }
}

@keyframes hfExit {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
}

/* ── Responsive ── */
@media (max-width: 1023px) {
  .hero-featured-wrap {
    margin-top: 20px;
  }
  .hero-featured-card {
    max-width: 340px;
  }
  .hero-featured-glow {
    width: 280px;
    height: 280px;
  }
}

@media (max-width: 640px) {
  .hero-featured-card {
    max-width: 300px;
  }
  .hero-featured-img-wrap {
    height: 180px;
  }
  .hero-featured-model {
    font-size: 1.4rem;
  }
  .hero-featured-price {
    font-size: 1.3rem;
  }
}

/* ═══ CONVERSION ELEMENTS ═══ */

/* ── Card urgency badge (low stock) ── */
.car-badge-urgency {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(135deg, rgba(232,21,42,0.92) 0%, rgba(255,77,0,0.92) 100%);
  color: #fff;
  font-family: var(--font-cond);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 6px 12px;
  text-align: center;
  animation: urgencyBlink 2s ease-in-out infinite;
  z-index: 2;
  backdrop-filter: blur(4px);
}

@keyframes urgencyBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* ── Discount percentage badge ── */
.car-badge-discount {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--orange);
  color: #000;
  font-family: var(--font-cond);
  font-size: 0.78rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 8px;
  z-index: 2;
  letter-spacing: 0.02em;
}

/* ── Social proof on card ── */
.car-social-proof {
  font-family: var(--font-cond);
  font-size: 0.72rem;
  color: var(--gray);
  margin-top: 4px;
  margin-bottom: 4px;
  padding: 3px 0;
  letter-spacing: 0.02em;
}

/* ── Modal urgency strip ── */
.modal-urgency-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 10px;
  font-family: var(--font-cond);
  font-size: 0.82rem;
  color: #fff;
  margin: 8px 0 4px;
  letter-spacing: 0.02em;
}

.modal-urgency-strip.urgency-pulse {
  background: linear-gradient(135deg, rgba(232,21,42,0.15) 0%, rgba(255,77,0,0.12) 100%);
  border: 1px solid rgba(232,21,42,0.3);
  color: #ff8a80;
  animation: urgencyStripPulse 2.5s ease-in-out infinite;
}

.modal-urgency-strip.urgency-offer {
  background: linear-gradient(135deg, rgba(255,107,26,0.12) 0%, rgba(255,214,10,0.08) 100%);
  border: 1px solid rgba(255,107,26,0.25);
  color: var(--orange);
}

@keyframes urgencyStripPulse {
  0%, 100% { border-color: rgba(232,21,42,0.3); }
  50% { border-color: rgba(232,21,42,0.6); box-shadow: 0 0 12px rgba(232,21,42,0.1); }
}

/* ── Modal social proof line ── */
.modal-social-proof {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-cond);
  font-size: 0.78rem;
  color: var(--gray);
  margin-top: 8px;
  padding: 8px 0;
  border-top: 1px solid rgba(255,255,255,0.04);
  letter-spacing: 0.02em;
}

/* ═══ MI PERFIL ═══ */

.profile-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 32px;
}

.profile-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--red) 0%, var(--orange) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.8rem;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 20px rgba(232,21,42,0.3);
}

.profile-name {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--white);
  line-height: 1;
}

.profile-email {
  font-family: var(--font-cond);
  font-size: 0.85rem;
  color: var(--gray);
  margin-top: 4px;
  letter-spacing: 0.02em;
}

/* ── Stats grid ── */
.profile-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}

.profile-stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px 16px;
  text-align: center;
  transition: border-color 0.3s, transform 0.2s;
}

.profile-stat-card:hover {
  border-color: rgba(232,21,42,0.3);
  transform: translateY(-2px);
}

.profile-stat-icon {
  font-size: 1.6rem;
  margin-bottom: 6px;
}

.profile-stat-value {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--white);
  line-height: 1;
}

.profile-stat-label {
  font-family: var(--font-cond);
  font-size: 0.72rem;
  color: var(--gray);
  margin-top: 4px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── Section cards ── */
.profile-section-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px;
  margin-bottom: 20px;
}

.profile-section-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--white);
  margin-bottom: 6px;
}

.profile-section-sub {
  font-size: 0.88rem;
  color: var(--gray);
  margin-bottom: 20px;
  line-height: 1.6;
}

/* ── Milestones ── */
.profile-milestones {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.profile-milestone {
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  transition: border-color 0.3s;
}

.profile-milestone.milestone-reached {
  border-color: rgba(34,197,94,0.4);
  background: rgba(34,197,94,0.04);
}

.milestone-bar-wrap {
  height: 6px;
  background: var(--bg3);
  border-radius: 100px;
  overflow: hidden;
  margin-bottom: 10px;
}

.milestone-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--yellow), var(--orange), var(--red));
  border-radius: 100px;
  transition: width 0.8s ease;
}

.milestone-reached .milestone-bar-fill {
  background: linear-gradient(90deg, #22c55e, #4ade80);
}

.milestone-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.milestone-emoji {
  font-size: 1.4rem;
}

.milestone-text {
  display: flex;
  flex-direction: column;
  font-family: var(--font-cond);
  font-size: 0.88rem;
  color: var(--white);
}

.milestone-stars {
  font-size: 0.78rem;
  color: var(--gray);
  font-weight: 400;
}

/* ── Coupons grid ── */
.profile-cupones-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.profile-cupon {
  background: linear-gradient(135deg, rgba(22,22,32,0.9) 0%, rgba(30,30,45,0.9) 100%);
  border: 1px dashed rgba(255,214,10,0.3);
  border-radius: 14px;
  padding: 18px;
  transition: border-color 0.3s;
}

.profile-cupon:hover {
  border-color: rgba(255,214,10,0.6);
}

.profile-cupon.cupon-used {
  opacity: 0.5;
  border-color: var(--border);
}

.cupon-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.cupon-tipo {
  font-family: var(--font-cond);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--white);
  flex: 1;
}

.cupon-estado {
  font-family: var(--font-cond);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 100px;
  letter-spacing: 0.08em;
}

.cupon-estado-activo { background: rgba(34,197,94,0.15); color: #4ade80; }
.cupon-estado-usado { background: rgba(255,255,255,0.06); color: var(--gray); }
.cupon-estado-expirado { background: rgba(232,21,42,0.1); color: var(--red); }

.cupon-code {
  font-family: var(--font-mono, monospace);
  font-size: 1.1rem;
  color: var(--yellow);
  background: rgba(0,0,0,0.3);
  padding: 8px 14px;
  border-radius: 8px;
  text-align: center;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}

.cupon-wa-btn {
  display: block;
  text-align: center;
  font-family: var(--font-cond);
  font-size: 0.82rem;
  font-weight: 700;
  color: #25d366;
  text-decoration: none;
  padding: 8px;
  border-radius: 8px;
  background: rgba(37,211,102,0.08);
  transition: background 0.2s;
}

.cupon-wa-btn:hover {
  background: rgba(37,211,102,0.15);
}

/* ── Eligible cars grid ── */
.profile-elegibles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}

.profile-elegible-card {
  background: var(--bg3);
  border-radius: 12px;
  overflow: hidden;
  text-align: center;
}

.profile-elegible-card img {
  width: 100%;
  height: 100px;
  object-fit: cover;
}

.elegible-no-img {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  background: rgba(255,255,255,0.02);
}

.elegible-info {
  padding: 8px;
  font-family: var(--font-cond);
  font-size: 0.78rem;
  color: var(--white);
}

.elegible-brand {
  display: block;
  font-size: 0.68rem;
  color: var(--red);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── Purchase history ── */
.profile-compras-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.profile-compra-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  transition: background 0.2s;
}

.profile-compra-row:hover {
  background: rgba(255,255,255,0.02);
}

.compra-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
}

.compra-details {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  font-size: 0.88rem;
  color: var(--white);
}

.compra-date {
  font-family: var(--font-cond);
  font-size: 0.75rem;
  color: var(--gray);
  letter-spacing: 0.02em;
}

.compra-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}

.compra-price {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--white);
}

.compra-stars {
  font-family: var(--font-cond);
  font-size: 0.75rem;
  color: var(--yellow);
  font-weight: 700;
}

/* ── Empty state ── */
.profile-empty {
  text-align: center;
  padding: 40px 20px;
}

.profile-empty-icon {
  font-size: 3rem;
  margin-bottom: 12px;
}

.profile-empty h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--white);
  margin-bottom: 8px;
}

.profile-empty p {
  color: var(--gray);
  font-size: 0.9rem;
  max-width: 400px;
  margin: 0 auto;
}

/* ── Previous coupons ── */
.profile-details summary::-webkit-details-marker { display: none; }
.profile-details summary::marker { display: none; content: ''; }

.profile-cupones-hist {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 16px;
}

.profile-cupon-hist-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  font-family: var(--font-cond);
  font-size: 0.82rem;
  color: var(--gray-light);
  border-radius: 8px;
}

.profile-cupon-hist-row:hover {
  background: rgba(255,255,255,0.02);
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .profile-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .profile-section-card {
    padding: 20px 16px;
  }
  .profile-name {
    font-size: 1.5rem;
  }
  .profile-stat-value {
    font-size: 1.6rem;
  }
}

@media (max-width: 480px) {
  .profile-header {
    flex-direction: column;
    text-align: center;
  }
  .profile-compra-row {
    flex-wrap: wrap;
  }
}