/* =============================================
   MOTOR IMPORT — Premium Car Dealership CSS
   ============================================= */

/* ── 1. Variables ─────────────────────────── */
:root {
  /* Light theme: blancos / grises claros */
  --bg:           #f7f8fa;
  --surface:      #ffffff;
  --card:         #ffffff;
  --card-hover:   #f1f3f6;
  --border:       rgba(15,20,25,0.08);
  --border-hover: rgba(237,28,36,0.45);

  /* Colores de marca (extraídos del logo Cars & Campers BCN) */
  --brand-red:    #ed1c24;
  --brand-dark:   #0f1419;
  --brand-white:  #ffffff;

  /* Aliases — el rojo del logo es el acento principal */
  --gold:         #ed1c24;
  --gold-light:   #ea2730;
  --gold-dark:    #b81015;
  --gold-dim:     rgba(237,28,36,0.10);
  --gold-glow:    rgba(237,28,36,0.22);

  --accent:       #ed1c24;
  --accent-light: #ea2730;
  --accent-dark:  #b81015;

  --text:         #0f1419;
  --text-muted:   #5a6472;
  --text-dim:     #9ca3af;

  --success:      #10b981;
  --error:        #dc2626;
  --warning:      #f59e0b;
  --info:         #3b82f6;

  --radius:       12px;
  --radius-sm:    8px;
  --radius-lg:    20px;
  --radius-xl:    28px;

  --transition:   0.2s ease;
  --transition-md:0.3s ease;
  --transition-lg:0.5s ease;

  --shadow:       0 4px 16px rgba(15,20,25,0.06);
  --shadow-card:  0 8px 28px rgba(15,20,25,0.10);
  --shadow-gold:  0 0 30px rgba(237,28,36,0.15);
  --nav-h:        90px;
  --nav-h-scrolled: 60px;
}

/* ── 2. Reset ─────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, h5 { line-height: 1.2; letter-spacing: -0.02em; }
h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; }
h2 { font-size: clamp(1.4rem, 3vw, 2.2rem); font-weight: 700; }
h3 { font-size: 1.2rem; font-weight: 700; }
h4 { font-size: 1rem; font-weight: 600; }
p  { color: var(--text-muted); }
strong { color: var(--text); font-weight: 700; }

/* ── 3. Utilities ─────────────────────────── */
.container { max-width: 1280px; margin: 0 auto; padding: 0 2rem; }
.section    { padding: 6rem 0; }
.text-gold  { color: var(--gold); }
.btn-block  { width: 100%; justify-content: center; }

/* ── 4. Buttons ───────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-sm);
  font-weight: 600; font-size: 0.9rem;
  transition: all var(--transition);
  white-space: nowrap; cursor: pointer;
  border: 1px solid transparent;
  position: relative;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--gold); color: #0a0800; border-color: var(--gold); }
.btn-primary:hover { background: var(--gold-light); box-shadow: 0 0 24px var(--gold-glow); }
.btn-outline { border-color: var(--border-hover); color: var(--gold); background: transparent; }
.btn-outline:hover { background: var(--gold-dim); }
.btn-ghost  { color: var(--text-muted); }
.btn-ghost:hover  { color: var(--text); background: rgba(15,20,25,0.05); }
.btn-danger { background: rgba(239,68,68,0.15); color: var(--error); border-color: rgba(239,68,68,0.3); }
.btn-danger:hover { background: rgba(239,68,68,0.25); }
.btn-heart  { border-color: var(--border); color: var(--text-muted); }
.btn-heart:hover, .btn-heart.is-favorite { border-color: rgba(239,68,68,0.4); color: #ef4444; background: rgba(239,68,68,0.08); }
.btn-lg { padding: 1rem 2rem; font-size: 1rem; border-radius: 10px; }
.btn-sm { padding: 0.45rem 1rem; font-size: 0.82rem; }
.btn-xs { padding: 0.3rem 0.7rem; font-size: 0.78rem; border-radius: 6px; }

/* ── 5. Forms ─────────────────────────────── */
.form-group { margin-bottom: 1.25rem; }
.form-label {
  display: block; font-size: 0.78rem; font-weight: 700;
  color: var(--text-muted); margin-bottom: 0.45rem;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.form-label .label-hint { font-weight: 400; text-transform: none; letter-spacing: 0; }
.req { color: var(--gold); }
.form-label-hint { font-size: 0.78rem; color: var(--text-dim); font-weight: 400; }
.form-input, .form-select, .form-textarea {
  width: 100%;
  background: rgba(15,20,25,0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 0.75rem 1rem;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
  appearance: none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(185,28,28,0.12);
}
.form-input::placeholder { color: var(--text-dim); }
.form-textarea { min-height: 120px; resize: vertical; }
.form-textarea-sm { min-height: 80px; }
.form-input-sm, .form-select-sm { padding: 0.6rem 0.875rem; font-size: 0.88rem; }
.form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 4.5l4 3.5 4-3.5' stroke='%236b7a8d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 12px; padding-right: 2.5rem; }
.form-check { display: flex; align-items: center; gap: 0.6rem; cursor: pointer; font-size: 0.9rem; color: var(--text-muted); }
.form-check input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--gold); cursor: pointer; }
.form-actions { display: flex; gap: 0.75rem; padding-top: 0.5rem; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; }
.input-pwd-wrap { position: relative; }
.input-pwd-wrap .form-input { padding-right: 3rem; }
.pwd-toggle {
  position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); padding: 0.25rem;
}
.pwd-toggle:hover { color: var(--text); }

/* ── 6. Badges ────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px; font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.badge-disponible { background: rgba(16,185,129,0.12); color: #10b981; }
.badge-reservado  { background: rgba(245,158,11,0.12); color: #f59e0b; }
.badge-vendido    { background: rgba(239,68,68,0.12);  color: #ef4444; }
.badge-gold       { background: var(--gold-dim); color: var(--gold); }
.badge-abierto    { background: rgba(59,130,246,0.12); color: #3b82f6; }
.badge-en-proceso { background: rgba(245,158,11,0.12); color: #f59e0b; }
.badge-cerrado    { background: rgba(107,114,128,0.12);color: #6b7280; }

/* ── 7. Alerts / Flash ────────────────────── */
.site-flash {
  position: fixed; top: 1rem; right: 1rem; z-index: 9998;
  max-width: 380px; min-width: 280px;
  animation: slideInRight 0.3s ease;
}
.alert {
  padding: 0.875rem 1rem; border-radius: var(--radius-sm);
  font-size: 0.88rem; font-weight: 500;
  display: flex; align-items: center; gap: 0.6rem;
  margin-bottom: 1.25rem;
}
.alert-success { background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.25); color: #10b981; }
.alert-error   { background: rgba(239,68,68,0.1);  border: 1px solid rgba(239,68,68,0.25);  color: #ef4444; }
.alert-warning { background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.25); color: #f59e0b; }
.alert-info    { background: rgba(59,130,246,0.1); border: 1px solid rgba(59,130,246,0.25); color: #3b82f6; }
.flash-close {
  margin-left: auto; font-size: 0.9rem; opacity: 0.6;
  padding: 0 0.2rem; transition: opacity var(--transition);
}
.flash-close:hover { opacity: 1; }

/* ── 8. Navigation ────────────────────────── */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: var(--nav-h);
  padding: 0 2rem;
  transition: background var(--transition-md), border-color var(--transition-md);
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom-color: var(--border);
}
.nav-container {
  max-width: 1280px; margin: 0 auto;
  display: flex; align-items: center; gap: 2rem; height: 100%;
}
.logo {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 1.25rem; font-weight: 700; color: var(--text);
  flex-shrink: 0;
}
.logo strong { color: var(--gold); }
.logo svg { flex-shrink: 0; }
.nav-links {
  display: flex; gap: 2rem; flex: 1; justify-content: center;
  align-items: center;
  margin: 0; padding: 0; list-style: none;
}
.nav-links > li { display: flex; align-items: center; }
.nav-links > li > a {
  display: inline-flex; align-items: center; gap: 0.3rem;
  color: var(--text-muted); font-weight: 500; font-size: 0.9rem;
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
.nav-links > li > a:hover, .nav-links > li > a.active {
  color: var(--text); border-bottom-color: var(--gold);
}
.nav-actions { display: flex; align-items: center; gap: 0.75rem; margin-left: auto; }
.user-menu { position: relative; }
.user-menu-trigger {
  display: flex; align-items: center; gap: 0.5rem;
  background: rgba(15,20,25,0.04); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 0.4rem 0.75rem 0.4rem 0.4rem;
  color: var(--text-muted); font-size: 0.85rem; font-weight: 600;
  transition: all var(--transition);
}
.user-menu-trigger:hover { border-color: var(--border-hover); color: var(--text); }
.user-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--gold-dim); border: 1px solid var(--border-hover);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 800; color: var(--gold);
}
.user-name { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-dropdown {
  position: absolute; top: calc(100% + 0.5rem); right: 0;
  min-width: 200px; background: var(--card);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-card); padding: 0.5rem;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: all var(--transition);
}
.user-dropdown.open { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown-item {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.6rem 0.75rem; border-radius: var(--radius-sm);
  color: var(--text-muted); font-size: 0.88rem; font-weight: 500;
  transition: all var(--transition);
}
.dropdown-item:hover { color: var(--text); background: rgba(15,20,25,0.05); }
.dropdown-divider { height: 1px; background: var(--border); margin: 0.3rem 0; }
.dropdown-logout { color: var(--error); }
.dropdown-logout:hover { background: rgba(239,68,68,0.08); }
.mobile-menu-btn {
  display: none; flex-direction: column; gap: 5px; padding: 0.4rem; border-radius: 6px;
}
.mobile-menu-btn span {
  display: block; width: 22px; height: 2px;
  background: var(--text-muted); border-radius: 2px; transition: all var(--transition-md);
}
.mobile-menu-btn.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.mobile-menu-btn.open span:nth-child(2) { opacity: 0; }
.mobile-menu-btn.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }
.mobile-menu {
  display: none; position: absolute; top: 100%; left: 0; right: 0;
  background: rgba(255,255,255,0.98); backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  padding: 1rem 2rem 1.5rem; flex-direction: column; gap: 0.25rem;
}
.mobile-menu.open { display: flex; }
.mobile-nav-item {
  padding: 0.7rem 0; color: var(--text-muted); font-weight: 500;
  border-bottom: 1px solid var(--border); transition: color var(--transition);
}
.mobile-nav-item:hover { color: var(--text); }
.mobile-cta { color: var(--gold); }
.mobile-logout { color: var(--error); }

/* ── 9. Hero ──────────────────────────────── */
.hero {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  position: relative; padding: calc(var(--nav-h) + 4rem) 2rem 4rem;
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 20% 60%, rgba(185,28,28,0.08) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 20%, rgba(59,130,246,0.05) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 90%, rgba(185,28,28,0.04) 0%, transparent 60%),
    linear-gradient(180deg, #0a0c12 0%, #f7f8fa 100%);
}
.hero-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 70px 70px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}
.hero-content {
  position: relative; text-align: center; max-width: 800px; z-index: 1;
  animation: fadeInUp 0.8s ease;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--gold-dim); border: 1px solid rgba(185,28,28,0.3);
  color: var(--gold); padding: 0.4rem 1rem; border-radius: 999px;
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em;
  margin-bottom: 1.75rem;
}
.badge-dot {
  width: 7px; height: 7px; background: var(--gold); border-radius: 50%;
  animation: pulse 2s infinite;
}
.hero-title { margin-bottom: 1.25rem; color: var(--text); }
.hero-subtitle { font-size: 1.1rem; color: var(--text-muted); margin-bottom: 2.5rem; line-height: 1.8; }
.hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 4rem; }
.hero-search {
  position: relative; z-index: 1; width: 100%; max-width: 900px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.5rem 1.75rem;
  box-shadow: var(--shadow-card);
}
.search-form {
  display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 1rem; align-items: end;
}
.search-group { display: flex; flex-direction: column; gap: 0.4rem; }
.search-group label {
  font-size: 0.72rem; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.07em;
}

/* ── 10. Stats ────────────────────────────── */
.stats-section {
  background: var(--surface);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: 3.5rem 0;
}
.stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 2rem; text-align: center;
}
.stat-item { position: relative; }
.stat-item + .stat-item::before {
  content: ''; position: absolute; left: 0; top: 15%; bottom: 15%;
  width: 1px; background: var(--border);
}
.stat-number {
  font-size: 2.8rem; font-weight: 800; color: var(--gold); line-height: 1;
  margin-bottom: 0.4rem; letter-spacing: -0.03em;
}
.stat-label { font-size: 0.88rem; color: var(--text-muted); }

/* ── 11. Section Headers ──────────────────── */
.section-header { text-align: center; max-width: 600px; margin: 0 auto 3rem; }
.section-tag {
  display: inline-block; color: var(--gold); font-size: 0.75rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.6rem;
}
.section-header h2 { margin-bottom: 0.75rem; }
.section-header p  { font-size: 1rem; }
.section-cta { text-align: center; margin-top: 3rem; }

/* ── 12. Car Cards ────────────────────────── */
.cars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 1.5rem;
}
.cars-grid-3 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.car-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  transition: transform var(--transition-md), border-color var(--transition-md), box-shadow var(--transition-md);
  display: flex; flex-direction: column;
}
.car-card:hover {
  transform: translateY(-6px);
  border-color: rgba(185,28,28,0.3);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(185,28,28,0.08);
}
.car-card-link { display: block; }
.car-card-image {
  aspect-ratio: 16/10; overflow: hidden;
  background: var(--surface); position: relative;
}
.car-card-image img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--transition-lg);
}
.car-card:hover .car-card-image img { transform: scale(1.06); }
.car-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(255,255,255,0.4) 0%, transparent 50%);
}
.car-card-img-count {
  position: absolute; bottom: 0.6rem; right: 0.6rem;
  background: rgba(0,0,0,0.6); color: rgba(255,255,255,0.7);
  border-radius: 999px; padding: 0.2rem 0.5rem; font-size: 0.7rem; font-weight: 600;
  display: flex; align-items: center; gap: 0.3rem;
  backdrop-filter: blur(4px);
}
.car-card-status-row {
  display: flex; gap: 0.4rem; padding: 0.75rem 1rem 0;
}
.car-card-body { padding: 0.75rem 1rem; flex: 1; }
.car-card-title {
  font-size: 1.05rem; font-weight: 700; color: var(--text);
  margin-bottom: 0.2rem; transition: color var(--transition);
}
.car-card:hover .car-card-title { color: var(--gold-light); }
.car-card-year { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 0.75rem; }
.origin-flag { font-weight: 500; }
.car-card-specs { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
.car-spec {
  display: flex; align-items: center; gap: 0.3rem;
  font-size: 0.78rem; color: var(--text-muted);
}
.car-spec svg { flex-shrink: 0; opacity: 0.6; }
.car-card-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.875rem 1rem;
  background: rgba(15,20,25,0.02);
  border-top: 1px solid var(--border);
  margin-top: auto;
}
.car-card-price { font-size: 1.35rem; font-weight: 800; color: var(--gold); letter-spacing: -0.02em; }

/* ── 13. Features / Why ───────────────────── */
.featured-section { padding: 5rem 0; }
.recent-section   { padding: 0 0 5rem; }
.features-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}
.feature-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 2rem;
  transition: border-color var(--transition-md), transform var(--transition-md);
}
.feature-card:hover { border-color: rgba(185,28,28,0.25); transform: translateY(-3px); }
.feature-icon {
  width: 52px; height: 52px;
  background: var(--gold-dim); border: 1px solid rgba(185,28,28,0.2);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold); margin-bottom: 1.25rem;
}
.feature-card h3 { margin-bottom: 0.6rem; }

/* ── 14. Steps "Cómo funciona" ────────────── */
.how-section { background: var(--surface); padding: 6rem 0; }
.steps-grid {
  display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  gap: 1rem; align-items: start;
}
.step-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 2rem 1.5rem;
  text-align: center;
  transition: border-color var(--transition-md);
}
.step-card:hover { border-color: rgba(185,28,28,0.25); }
.step-num {
  font-size: 2.5rem; font-weight: 900; color: var(--gold-dim);
  letter-spacing: -0.04em; margin-bottom: 1rem; line-height: 1;
}
.step-card h3 { margin-bottom: 0.5rem; font-size: 1.05rem; }
.step-arrow {
  font-size: 2rem; color: var(--text-dim);
  align-self: center; text-align: center; padding-top: 1rem;
}

/* ── 15. CTA Section ──────────────────────── */
.cta-section { padding: 5rem 0; }
.cta-box {
  background: linear-gradient(135deg, var(--card) 0%, rgba(185,28,28,0.06) 100%);
  border: 1px solid rgba(185,28,28,0.2);
  border-radius: var(--radius-xl); padding: 4rem;
  position: relative; overflow: hidden; text-align: center;
}
.cta-content { position: relative; z-index: 1; }
.cta-box h2 { color: var(--text); margin-bottom: 1rem; }
.cta-box p  { max-width: 520px; margin: 0 auto 2rem; font-size: 1rem; }
.cta-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.cta-decoration { position: absolute; inset: 0; pointer-events: none; }
.cta-ring {
  position: absolute; border-radius: 50%; border: 1px solid rgba(185,28,28,0.08);
}
.cta-ring-1 { width: 400px; height: 400px; top: -200px; right: -100px; }
.cta-ring-2 { width: 600px; height: 600px; top: -300px; right: -200px; }
.cta-ring-3 { width: 250px; height: 250px; bottom: -100px; left: -50px; }

/* ── 16. Footer ───────────────────────────── */
.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 5rem 0 2.5rem;
}
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr;
  gap: 3rem; margin-bottom: 3.5rem;
}
.footer-logo { font-size: 1.1rem; margin-bottom: 1rem; }
.footer-tagline { font-size: 0.9rem; margin-bottom: 1.25rem; max-width: 280px; }
.footer-badges { display: flex; flex-direction: column; gap: 0.4rem; }
.footer-badge {
  display: inline-block; font-size: 0.78rem; color: var(--gold);
  font-weight: 600;
}
.footer-col-title { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 1rem; }
.footer-links { display: flex; flex-direction: column; gap: 0.5rem; }
.footer-links a { font-size: 0.88rem; color: var(--text-muted); transition: color var(--transition); }
.footer-links a:hover { color: var(--text); }
.footer-contact { display: flex; flex-direction: column; gap: 0.6rem; }
.footer-contact li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.88rem; color: var(--text-muted); }
.footer-contact svg { flex-shrink: 0; margin-top: 2px; opacity: 0.5; }
.footer-bottom {
  border-top: 1px solid var(--border); padding-top: 1.75rem;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem;
  font-size: 0.82rem; color: var(--text-dim);
}

/* ── 17. Catalog page ─────────────────────── */
.catalog-page { padding-top: var(--nav-h); }
.catalog-header {
  background: var(--surface); border-bottom: 1px solid var(--border);
  padding: 2.5rem 0;
}
.catalog-header h1 { font-size: 2rem; }
.catalog-subtitle { font-size: 0.9rem; color: var(--text-muted); margin-top: 0.25rem; }
.catalog-layout {
  display: grid; grid-template-columns: 260px 1fr;
  gap: 2rem; padding-top: 2rem; padding-bottom: 3rem;
}
.filters-panel {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.5rem;
  height: fit-content; position: sticky; top: calc(var(--nav-h) + 1rem);
}
.filters-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.filters-header h3 { font-size: 1rem; }
.filters-reset { font-size: 0.8rem; color: var(--text-muted); transition: color var(--transition); }
.filters-reset:hover { color: var(--gold); }
.filter-group { margin-bottom: 1.25rem; }
.filter-label {
  display: block; font-size: 0.73rem; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.4rem;
}
.catalog-results { min-height: 60vh; }
.empty-state {
  display: flex; flex-direction: column; align-items: center;
  gap: 1rem; padding: 5rem 2rem; text-align: center;
  color: var(--text-dim);
}
.empty-state h3 { color: var(--text-muted); }
.empty-state a { color: var(--gold); }
.empty-state svg { opacity: 0.2; }
.empty-state-sm { padding: 2rem; }

/* ── 18. Car Detail ───────────────────────── */
.car-detail-page { padding-top: var(--nav-h); }
.breadcrumb {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.82rem; color: var(--text-muted); padding: 1.5rem 0 2rem;
}
.breadcrumb a:hover { color: var(--gold); }
.bc-sep { opacity: 0.4; }
.car-detail-grid {
  display: grid; grid-template-columns: 1fr 400px; gap: 3rem;
  margin-bottom: 3rem;
}
.car-gallery { position: sticky; top: calc(var(--nav-h) + 1rem); height: fit-content; }
.gallery-main {
  aspect-ratio: 4/3; background: var(--card); border-radius: var(--radius);
  overflow: hidden; cursor: zoom-in; position: relative;
  border: 1px solid var(--border);
}
.gallery-main img {
  width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-md);
}
.gallery-main:hover img { transform: scale(1.02); }
.gallery-zoom-hint {
  position: absolute; bottom: 1rem; right: 1rem;
  background: rgba(0,0,0,0.6); color: rgba(255,255,255,0.8);
  border-radius: 999px; padding: 0.3rem 0.75rem; font-size: 0.75rem; font-weight: 500;
  display: flex; align-items: center; gap: 0.35rem;
  opacity: 0; transition: opacity var(--transition);
  pointer-events: none; backdrop-filter: blur(4px);
}
.gallery-main:hover .gallery-zoom-hint { opacity: 1; }
.gallery-thumbs {
  display: flex; gap: 0.5rem; margin-top: 0.75rem;
  overflow-x: auto; padding-bottom: 0.25rem;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.gallery-thumb {
  flex-shrink: 0; width: 72px; height: 54px; border-radius: 6px; overflow: hidden;
  cursor: pointer; border: 2px solid transparent; transition: border-color var(--transition);
  opacity: 0.65; transition: opacity var(--transition), border-color var(--transition);
}
.gallery-thumb:hover { opacity: 0.85; }
.gallery-thumb.active { border-color: var(--gold); opacity: 1; }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery-counter-bar { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.5rem; }
.car-info-panel {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 2rem; height: fit-content;
}
.car-status-row { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.car-detail-title { font-size: 2rem; color: var(--text); margin-bottom: 0.25rem; }
.car-detail-sub { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 1.25rem; }
.car-detail-price {
  font-size: 2.4rem; font-weight: 900; color: var(--gold);
  letter-spacing: -0.03em; margin-bottom: 1.75rem; line-height: 1;
}
.quick-specs-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 1.75rem;
}
.qs-item {
  display: flex; align-items: center; gap: 0.6rem;
  background: rgba(15,20,25,0.03); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 0.75rem;
}
.qs-icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--gold); opacity: 0.7; }
.qs-value { font-size: 0.88rem; font-weight: 700; color: var(--text); line-height: 1.2; }
.qs-key   { font-size: 0.7rem; color: var(--text-muted); }
.car-actions-panel { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.5rem; }
.car-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.car-tag {
  display: inline-block; font-size: 0.78rem; color: var(--text-muted);
  background: rgba(15,20,25,0.04); border: 1px solid var(--border);
  border-radius: 999px; padding: 0.2rem 0.65rem;
}
.car-section { margin-bottom: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--border); }
.car-section:last-child { border-bottom: none; }
.car-section-title { font-size: 1.4rem; margin-bottom: 1.25rem; }
.car-description {
  color: var(--text-muted); line-height: 1.8;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.5rem;
}
.specs-table { display: flex; flex-direction: column; gap: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
.spec-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.75rem 1.25rem; gap: 1rem;
}
.spec-row:nth-child(even) { background: rgba(255,255,255,0.025); }
.spec-key { font-size: 0.85rem; color: var(--text-muted); flex-shrink: 0; }
.spec-val { font-size: 0.9rem; font-weight: 600; color: var(--text); text-align: right; }

/* ── 19. Lightbox ─────────────────────────── */
.lightbox {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.96); backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: all var(--transition-md);
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox-img {
  max-height: 90vh; max-width: 90vw; object-fit: contain;
  border-radius: var(--radius-sm); box-shadow: 0 0 80px rgba(0,0,0,0.5);
  transition: transform 0.2s ease;
}
.lightbox-close {
  position: absolute; top: 1.25rem; right: 1.25rem;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.8);
  font-size: 1.1rem; display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
}
.lightbox-close:hover { background: rgba(255,255,255,0.2); color: white; }
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,0.1); color: white;
  font-size: 2rem; display: flex; align-items: center; justify-content: center;
  line-height: 1; transition: all var(--transition);
}
.lightbox-nav:hover { background: rgba(255,255,255,0.2); }
.lightbox-prev { left: 1.5rem; }
.lightbox-next { right: 1.5rem; }
.lightbox-counter {
  position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,0.5); font-size: 0.85rem; letter-spacing: 0.05em;
}

/* ── 20. Auth pages ───────────────────────── */
.auth-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 2rem; padding-top: calc(var(--nav-h) + 2rem);
  position: relative; overflow: hidden;
  background: radial-gradient(ellipse at 30% 50%, rgba(185,28,28,0.05) 0%, transparent 60%),
              var(--bg);
}
.auth-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 2.5rem;
  width: 100%; max-width: 420px; position: relative; z-index: 1;
  box-shadow: var(--shadow-card);
}
.auth-logo { text-align: center; margin-bottom: 2rem; }
.auth-title { font-size: 1.6rem; text-align: center; margin-bottom: 0.4rem; }
.auth-subtitle { text-align: center; font-size: 0.9rem; margin-bottom: 2rem; }
.auth-form { display: flex; flex-direction: column; gap: 0; }
.auth-divider {
  text-align: center; color: var(--text-dim); font-size: 0.8rem;
  margin: 1.25rem 0; position: relative;
}
.auth-divider::before, .auth-divider::after {
  content: ''; position: absolute; top: 50%; width: 35%;
  height: 1px; background: var(--border);
}
.auth-divider::before { left: 0; }
.auth-divider::after  { right: 0; }
.auth-back {
  display: block; text-align: center; font-size: 0.82rem;
  color: var(--text-dim); margin-top: 1.5rem; transition: color var(--transition);
}
.auth-back:hover { color: var(--text-muted); }
.auth-bg-decoration { position: absolute; inset: 0; pointer-events: none; }
.auth-deco-ring {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(185,28,28,0.06);
}
.auth-deco-ring-1 { width: 500px; height: 500px; right: -200px; bottom: -200px; }
.auth-deco-ring-2 { width: 700px; height: 700px; right: -350px; bottom: -350px; }

/* ── 21. Inner pages (favorites, support) ─── */
.inner-page { padding-top: var(--nav-h); }
.inner-header { padding: 2.5rem 0 2rem; border-bottom: 1px solid var(--border); margin-bottom: 2rem; }
.inner-header h1 { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.25rem; }
.inner-header p  { margin: 0; }
.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 2rem;
}
.card-title { font-size: 1.1rem; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
.support-layout {
  display: grid; grid-template-columns: 400px 1fr;
  gap: 2rem; padding-bottom: 3rem;
}
.support-tickets-title { font-size: 1.1rem; margin-bottom: 1.25rem; }
.tickets-list { display: flex; flex-direction: column; gap: 1rem; }
.ticket-item {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.25rem; overflow: hidden;
}
.ticket-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 0.75rem; }
.ticket-subject { font-size: 0.95rem; font-weight: 700; color: var(--text); margin-bottom: 0.2rem; }
.ticket-date { font-size: 0.75rem; color: var(--text-muted); }
.ticket-msg { font-size: 0.88rem; color: var(--text-muted); }
.ticket-response {
  margin-top: 1rem; padding: 1rem; border-radius: var(--radius-sm);
  background: rgba(16,185,129,0.06); border: 1px solid rgba(16,185,129,0.15);
}
.ticket-response-label {
  font-size: 0.75rem; font-weight: 700; color: #10b981;
  text-transform: uppercase; letter-spacing: 0.05em;
  display: flex; align-items: center; gap: 0.35rem; margin-bottom: 0.5rem;
}
.ticket-response p { font-size: 0.88rem; color: var(--text-muted); }

/* ── 22. Error 404 ────────────────────────── */
.error-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  text-align: center; padding-top: var(--nav-h);
}
.error-content { padding: 2rem; }
.error-number {
  font-size: 9rem; font-weight: 900; color: var(--gold); line-height: 1;
  letter-spacing: -0.05em; opacity: 0.15; margin-bottom: -1rem;
}
.error-title { font-size: 2rem; margin-bottom: 1rem; }
.error-subtitle { color: var(--text-muted); margin-bottom: 2rem; }
.error-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ── 23. Admin Layout ─────────────────────── */
body.admin-body { }
.admin-wrapper {
  display: grid; grid-template-columns: 240px 1fr;
  min-height: calc(100vh - var(--nav-h)); padding-top: var(--nav-h);
}
.admin-sidebar {
  background: var(--surface); border-right: 1px solid var(--border);
  position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h));
  overflow-y: auto; display: flex; flex-direction: column;
}
.admin-sidebar-brand {
  padding: 1.5rem 1.25rem 1rem;
  border-bottom: 1px solid var(--border); margin-bottom: 0.5rem;
}
.admin-badge-label {
  display: inline-block; font-size: 0.68rem; font-weight: 700; color: var(--gold);
  text-transform: uppercase; letter-spacing: 0.08em;
  background: var(--gold-dim); border: 1px solid rgba(185,28,28,0.2);
  border-radius: 999px; padding: 0.15rem 0.5rem; margin-top: 0.5rem;
}
.admin-nav { flex: 1; padding: 0.5rem; }
.admin-nav-item {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem 1rem; border-radius: var(--radius-sm);
  color: var(--text-muted); font-weight: 500; font-size: 0.88rem;
  transition: all var(--transition); white-space: nowrap;
}
.admin-nav-item:hover { color: var(--text); background: rgba(15,20,25,0.04); }
.admin-nav-item.active {
  color: var(--gold); background: var(--gold-dim);
  border-left: 2px solid var(--gold); margin-left: -2px;
  padding-left: calc(1rem + 2px);
}
.admin-sidebar-footer {
  padding: 0.5rem; border-top: 1px solid var(--border);
}
.admin-logout { color: var(--error) !important; }
.admin-logout:hover { background: rgba(239,68,68,0.08) !important; }
.admin-main { padding: 2rem; overflow: auto; }
.admin-top-bar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 2rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border);
}
.admin-page-title { font-size: 1.5rem; }
.admin-breadcrumb { display: flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; color: var(--text-muted); }
.admin-breadcrumb a { color: var(--gold); }
.admin-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; margin-bottom: 1.5rem;
}
.admin-card-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border);
}
.admin-card-title { font-size: 1rem; font-weight: 700; }
.admin-card-link { font-size: 0.82rem; color: var(--gold); }
.admin-card > form, .admin-card > .form-grid-2 { padding: 1.5rem; }
.admin-card > h2.admin-card-title { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border); }
.admin-empty { color: var(--text-muted); font-size: 0.88rem; }
.admin-empty a { color: var(--gold); }
.admin-stats-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1rem; margin-bottom: 1.5rem;
}
.admin-stat-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.25rem 1.5rem;
  display: flex; align-items: center; gap: 1rem;
}
.admin-stat-icon {
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.admin-stat-icon-green  { background: rgba(16,185,129,0.12); color: #10b981; }
.admin-stat-icon-yellow { background: rgba(245,158,11,0.12); color: #f59e0b; }
.admin-stat-icon-red    { background: rgba(239,68,68,0.12);  color: #ef4444; }
.admin-stat-icon-blue   { background: rgba(59,130,246,0.12); color: #3b82f6; }
.admin-stat-icon-orange { background: rgba(249,115,22,0.12); color: #f97316; }
.admin-stat-icon-purple { background: rgba(168,85,247,0.12); color: #a855f7; }
.admin-stat-value { font-size: 1.8rem; font-weight: 800; color: var(--text); line-height: 1; }
.admin-stat-label { font-size: 0.78rem; color: var(--text-muted); }
.admin-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.admin-mini-list { display: flex; flex-direction: column; }
.admin-mini-item {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.875rem 1.25rem; border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}
.admin-mini-item:last-child { border-bottom: none; }
.admin-mini-img { width: 48px; height: 36px; border-radius: 6px; overflow: hidden; background: var(--surface); flex-shrink: 0; }
.admin-mini-img img { width: 100%; height: 100%; object-fit: cover; }
.admin-mini-info { flex: 1; min-width: 0; }
.admin-mini-info strong { display: block; font-size: 0.85rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-mini-price { color: var(--gold); font-weight: 700; font-size: 0.88rem; flex-shrink: 0; }
.ticket-user-label { font-size: 0.78rem; color: var(--text-muted); }
.admin-form-layout { display: flex; flex-direction: column; gap: 1.5rem; }
.admin-card .form-grid-2, .admin-card form { padding: 1.5rem; }

/* ── 24. Table ────────────────────────────── */
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted); padding: 0.875rem 1.25rem;
  text-align: left; border-bottom: 1px solid var(--border);
  background: rgba(15,20,25,0.02); white-space: nowrap;
}
.data-table td { padding: 0.875rem 1.25rem; border-bottom: 1px solid var(--border); font-size: 0.88rem; vertical-align: middle; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: rgba(15,20,25,0.02); }
.table-thumb { width: 52px; height: 40px; border-radius: 6px; overflow: hidden; background: var(--surface); }
.table-thumb img { width: 100%; height: 100%; object-fit: cover; }
.table-car-name { font-weight: 700; color: var(--text); margin-bottom: 0.15rem; }
.table-car-sub  { font-size: 0.75rem; color: var(--text-muted); }
.td-price { font-weight: 700; color: var(--gold); }
.table-img-count { display: flex; align-items: center; gap: 0.3rem; color: var(--text-muted); font-size: 0.82rem; }
.table-actions { display: flex; align-items: center; gap: 0.4rem; justify-content: flex-end; }
.user-cell { display: flex; align-items: center; gap: 0.6rem; }
.user-cell-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--gold-dim); color: var(--gold); font-weight: 700; font-size: 0.78rem;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* ── 25. Image upload ─────────────────────── */
.upload-zone {
  position: relative; border: 2px dashed var(--border);
  border-radius: var(--radius); padding: 2.5rem; text-align: center;
  cursor: pointer; transition: all var(--transition);
}
.upload-zone:hover, .upload-zone.drag-over {
  border-color: var(--gold); background: var(--gold-dim);
}
.upload-zone-sm { padding: 1.5rem; }
.upload-input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; z-index: 1;
}
.upload-zone-content { pointer-events: none; color: var(--text-muted); }
.upload-zone-content svg { margin: 0 auto 0.75rem; opacity: 0.4; }
.upload-zone-content p { font-size: 0.88rem; margin-bottom: 0; }
.upload-zone-link { color: var(--gold); }
.upload-zone-hint { font-size: 0.75rem; color: var(--text-dim); margin-top: 0.25rem; }
.upload-preview {
  display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem;
}
.upload-preview-item {
  position: relative; width: 80px; height: 60px;
  border-radius: 6px; overflow: hidden; border: 1px solid var(--border);
}
.upload-preview-item img { width: 100%; height: 100%; object-fit: cover; }
.upload-preview-item .remove-preview {
  position: absolute; top: 2px; right: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(0,0,0,0.7); color: white;
  font-size: 0.65rem; display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.admin-img-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.75rem; padding: 1.5rem;
}
.admin-img-item {
  position: relative; aspect-ratio: 4/3;
  border-radius: var(--radius-sm); overflow: hidden;
  border: 2px solid transparent; transition: border-color var(--transition);
  background: var(--surface);
}
.admin-img-item img { width: 100%; height: 100%; object-fit: cover; }
.admin-img-overlay {
  position: absolute; inset: 0; background: rgba(0,0,0,0); transition: background var(--transition);
  display: flex; align-items: flex-start; justify-content: flex-end; padding: 0.35rem; gap: 0.25rem;
}
.admin-img-item:hover .admin-img-overlay { background: rgba(0,0,0,0.5); }
.admin-img-btn {
  width: 28px; height: 28px; border-radius: var(--radius-sm);
  background: rgba(0,0,0,0.6); color: white;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity var(--transition);
  backdrop-filter: blur(4px);
}
.admin-img-item:hover .admin-img-btn { opacity: 1; }
.admin-img-btn-del { background: rgba(239,68,68,0.7) !important; }
.admin-img-principal {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: var(--gold); color: #0a0800;
  font-size: 0.65rem; font-weight: 800; text-align: center;
  padding: 0.2rem; text-transform: uppercase; letter-spacing: 0.05em;
}
.img-counter-badge {
  font-size: 0.75rem; color: var(--text-muted); font-weight: 400;
  background: rgba(15,20,25,0.06); border-radius: 999px;
  padding: 0.15rem 0.5rem; margin-left: 0.5rem;
}
.img-action-form { display: inline; }

/* ── 26. Tickets admin ────────────────────── */
.tickets-admin-list { display: flex; flex-direction: column; gap: 1rem; }
.admin-ticket-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.admin-ticket-card.ticket-estado-abierto { border-left: 3px solid #3b82f6; }
.admin-ticket-card.ticket-estado-en-proceso { border-left: 3px solid #f59e0b; }
.admin-ticket-card.ticket-estado-cerrado { opacity: 0.7; }
.admin-ticket-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
  padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border);
}
.admin-ticket-subject { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 0.3rem; }
.admin-ticket-info { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.78rem; color: var(--text-muted); }
.admin-ticket-info span { display: flex; align-items: center; gap: 0.35rem; }
.admin-ticket-body { padding: 1.25rem 1.5rem; }
.admin-ticket-msg { font-size: 0.88rem; color: var(--text-muted); white-space: pre-wrap; }
.admin-ticket-existing-response {
  margin-top: 1rem; padding: 1rem; border-radius: var(--radius-sm);
  background: rgba(16,185,129,0.06); border: 1px solid rgba(16,185,129,0.15);
}
.response-label { font-size: 0.72rem; font-weight: 700; color: #10b981; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.4rem; }
.admin-ticket-reply {
  padding: 1rem 1.5rem; background: rgba(15,20,25,0.02);
  border-top: 1px solid var(--border);
}
.reply-form-row { display: flex; flex-direction: column; gap: 0.5rem; }
.reply-form-actions { display: flex; gap: 0.5rem; align-items: center; }
.reply-form-actions .form-select-sm { max-width: 180px; }

/* ── 27. Animations ───────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.85); }
}

/* ── 28. Responsive ───────────────────────── */
@media (max-width: 1100px) {
  .admin-stats-grid { grid-template-columns: repeat(3, 1fr); }
  .admin-two-col { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .steps-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .step-arrow { display: none; }
  .car-detail-grid { grid-template-columns: 1fr; }
  .car-gallery { position: static; }
}
@media (max-width: 900px) {
  .catalog-layout { grid-template-columns: 1fr; }
  .filters-panel { position: static; }
  .search-form { grid-template-columns: 1fr 1fr; }
  .support-layout { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .admin-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .form-grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .nav-links { display: none; }
  .user-name { display: none; }
  .mobile-menu-btn { display: flex; }
  .hero-search { border-radius: var(--radius); }
  .search-form { grid-template-columns: 1fr; }
  .features-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .cta-box { padding: 2.5rem 1.5rem; }
  .admin-wrapper { grid-template-columns: 1fr; }
  .admin-sidebar { display: none; }
  .quick-specs-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .container { padding: 0 1rem; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .admin-stats-grid { grid-template-columns: 1fr 1fr; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .auth-card { padding: 1.75rem; }
  .steps-grid { grid-template-columns: 1fr; }
  .cars-grid { grid-template-columns: 1fr; }
}

/* ═════════════════════════════════════════════════════════════════
   Cars & Campers — Estilos añadidos (rebrand v2)
   ═════════════════════════════════════════════════════════════════ */

/* Badge tipo (Coche / Camper) */
.badge-tipo {
  background: linear-gradient(135deg, rgba(185,28,28,0.18), rgba(185,28,28,0.08));
  color: var(--gold);
  border: 1px solid rgba(185,28,28,0.35);
  text-transform: none;
  letter-spacing: 0.01em;
}

/* Card: badge de tipo flotante sobre la imagen */
.car-card-type-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.65rem;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(185,28,28,0.35);
  color: var(--gold);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  z-index: 2;
}

/* Radio buttons del formulario admin (tipo de vehículo) */
.form-radio-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.form-radio {
  position: relative;
  cursor: pointer;
}
.form-radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.form-radio-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1rem;
  background: rgba(15,20,25,0.03);
  border: 1.5px solid rgba(15,20,25,0.08);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-weight: 500;
  transition: all 0.18s ease;
}
.form-radio:hover .form-radio-label {
  border-color: rgba(185,28,28,0.35);
  background: rgba(185,28,28,0.05);
}
.form-radio input[type="radio"]:checked + .form-radio-label {
  border-color: var(--gold);
  background: rgba(185,28,28,0.12);
  color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold) inset;
}

/* Detalle: fila de acciones secundarias (Llamar / Email) */
.actions-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-top: 0.6rem;
}

/* ── Página de contacto ───────────────────────────────────────── */
.contact-page {
  padding: 4rem 0 5rem;
}
.contact-hero {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 3.5rem;
}
.contact-hero h1 {
  font-size: clamp(2rem, 4vw, 2.75rem);
  margin: 0.75rem 0 1rem;
}
.contact-hero p {
  color: var(--text-muted);
  font-size: 1.1rem;
}
.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 3.5rem;
}
.contact-card {
  display: block;
  padding: 2rem 1.75rem;
  background: linear-gradient(180deg, rgba(15,20,25,0.04), rgba(15,20,25,0.01));
  border: 1px solid rgba(15,20,25,0.08);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
  text-align: center;
  transition: all 0.22s ease;
}
.contact-card:hover {
  border-color: var(--gold);
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.4);
}
.contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 1.25rem;
  background: rgba(185,28,28,0.12);
  border: 1px solid rgba(185,28,28,0.3);
  border-radius: 50%;
  color: var(--gold);
}
.contact-card h3 {
  font-size: 1.15rem;
  margin: 0 0 0.5rem;
}
.contact-card p {
  color: var(--text-muted);
  margin: 0 0 1rem;
  font-size: 0.95rem;
}
.contact-card-cta {
  display: inline-block;
  color: var(--gold);
  font-weight: 600;
  font-size: 0.9rem;
}
.contact-info-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.contact-info-card {
  padding: 1.75rem;
  background: rgba(15,20,25,0.03);
  border: 1px solid rgba(15,20,25,0.08);
  border-radius: var(--radius);
}
.contact-info-card h3 {
  margin: 0 0 1.25rem;
  font-size: 1.1rem;
}
.contact-hours {
  list-style: none;
  padding: 0;
  margin: 0;
}
.contact-hours li {
  display: flex;
  justify-content: space-between;
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(15,20,25,0.06);
  font-size: 0.95rem;
}
.contact-hours li:last-child { border: none; }
.contact-hours span { color: var(--text-muted); }
.contact-hours strong { color: var(--text); }
.contact-address {
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 1rem;
}
.contact-note {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin: 0;
  font-style: italic;
}
@media (max-width: 768px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-info-block { grid-template-columns: 1fr; }
}

/* ── Admin: tarjetas de administradores ──────────────────────── */
.admin-users-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 1.25rem;
}
.admin-user-card {
  padding: 1.5rem;
  background: rgba(15,20,25,0.03);
  border: 1px solid rgba(15,20,25,0.08);
  border-radius: var(--radius);
}
.admin-user-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.admin-user-avatar {
  width: 48px;
  height: 48px;
  font-size: 1.15rem;
}
.admin-user-name {
  font-weight: 600;
  font-size: 1.05rem;
}
.admin-user-email {
  color: var(--text-muted);
  font-size: 0.88rem;
  margin-top: 0.15rem;
}
.admin-user-head .badge { margin-left: auto; }
.admin-user-pwd summary {
  cursor: pointer;
  padding: 0.6rem 0.9rem;
  background: rgba(185,28,28,0.06);
  border: 1px solid rgba(185,28,28,0.18);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  color: var(--gold);
  font-weight: 500;
  list-style: none;
}
.admin-user-pwd summary::before { content: "🔒  "; }
.admin-user-pwd[open] summary { margin-bottom: 1rem; }
.admin-pwd-form {
  padding-top: 0.5rem;
}
.admin-user-foot {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(15,20,25,0.06);
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* Mini-list meta (badges agrupadas) */
.admin-mini-meta {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.3rem;
  flex-wrap: wrap;
}

/* ═════════════════════════════════════════════════════════════════
   REDISEÑO V2 — Hero cinematográfico, showcase, marquee
   ═════════════════════════════════════════════════════════════════ */

/* ── HERO V2 ────────────────────────────────────────────────────── */
.hero-v2 {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  padding: 6rem 1.5rem 4rem;
}
.hero-v2-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.hero-v2-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.55) saturate(1.15) contrast(1.05);
  animation: heroZoom 20s ease-in-out infinite alternate;
}
@keyframes heroZoom {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.08) translate(-2%, -1%); }
}
.hero-v2-grad {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(15,20,25,0.85) 0%, rgba(15,20,25,0.5) 35%, transparent 70%),
    linear-gradient(180deg, rgba(15,20,25,0.55) 0%, rgba(15,20,25,0.3) 40%, rgba(15,20,25,0.85) 100%);
}
.hero-v2-mesh {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle 600px at 80% 20%, rgba(185,28,28,0.18) 0%, transparent 60%),
    radial-gradient(circle 500px at 15% 70%, rgba(185,28,28,0.12) 0%, transparent 60%);
  animation: meshPulse 8s ease-in-out infinite alternate;
}
@keyframes meshPulse {
  from { opacity: 0.6; }
  to   { opacity: 1; }
}

.hero-v2-content {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  text-align: center;
  animation: heroFadeIn 1.2s ease-out;
}
@keyframes heroFadeIn {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-v2-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 1.15rem;
  background: rgba(15,20,25,0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(185,28,28,0.4);
  border-radius: 999px;
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 2rem;
}
.hero-v2-eyebrow .dot {
  width: 6px;
  height: 6px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--gold);
  animation: dotPulse 2s ease-in-out infinite;
}
@keyframes dotPulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: 0.5; transform: scale(1.3); }
}

.hero-v2-title {
  font-size: clamp(3.2rem, 11vw, 8.5rem);
  line-height: 0.95;
  font-weight: 800;
  letter-spacing: -0.04em;
  margin: 0 0 1.5rem;
  color: #fff;
  text-shadow: 0 6px 60px rgba(0,0,0,0.7);
}
.hero-v2-amp {
  font-style: italic;
  font-weight: 300;
  color: var(--gold);
  display: inline-block;
  transform: translateY(-0.05em);
  margin: 0 0.05em;
  text-shadow: 0 0 40px rgba(185,28,28,0.5);
}
.hero-v2-grad-txt {
  background: linear-gradient(135deg, #b91c1c 0%, #dc2626 50%, #b91c1c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 200%;
  animation: gradShift 6s ease-in-out infinite;
}
@keyframes gradShift {
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}

.hero-v2-sub {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: rgba(255,255,255,0.85);
  max-width: 640px;
  margin: 0 auto 2.5rem;
  line-height: 1.55;
}
.hero-v2-sub-em {
  color: var(--gold);
  font-weight: 500;
}

.hero-v2-stats {
  display: inline-flex;
  align-items: center;
  gap: 2rem;
  padding: 1.25rem 2rem;
  background: rgba(15,20,25,0.45);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 16px;
  margin-bottom: 2.5rem;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4), inset 0 1px 0 rgba(15,20,25,0.05);
}
.hero-v2-stats > div { text-align: center; }
.hero-v2-stats strong {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  color: var(--gold);
  line-height: 1;
  letter-spacing: -0.02em;
}
.hero-v2-stats strong i {
  font-style: normal;
  font-size: 0.6em;
  color: rgba(185,28,28,0.7);
  margin-left: 0.05em;
}
.hero-v2-stats span {
  display: block;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 0.3rem;
}
.hero-v2-stats .sep {
  width: 1px;
  height: 36px;
  background: rgba(15,20,25,0.12);
}

.hero-v2-cta {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}
.hero-v2-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1.1rem 2rem;
  background: rgba(15,20,25,0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(15,20,25,0.15);
  border-radius: 999px;
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}
.hero-v2-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 30%, rgba(185,28,28,0.2) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.5s ease;
}
.hero-v2-btn:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(185,28,28,0.25);
}
.hero-v2-btn:hover::before { transform: translateX(100%); }
.hero-v2-btn svg { transition: transform 0.25s ease; }
.hero-v2-btn:hover svg { transform: translateX(4px); }
.hero-v2-btn.primary {
  background: linear-gradient(135deg, #b91c1c 0%, #7f1d1d 100%);
  border-color: #b91c1c;
  color: #f7f8fa;
  box-shadow: 0 8px 32px rgba(185,28,28,0.35);
}
.hero-v2-btn.primary:hover {
  box-shadow: 0 12px 40px rgba(185,28,28,0.5);
}

.hero-v2-scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  color: rgba(255,255,255,0.5);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  animation: scrollBob 2.4s ease-in-out infinite;
}
.scroll-line {
  width: 1px;
  height: 38px;
  background: linear-gradient(180deg, var(--gold), transparent);
}
@keyframes scrollBob {
  0%,100% { transform: translate(-50%, 0); opacity: 0.5; }
  50%     { transform: translate(-50%, 8px); opacity: 1; }
}

/* ── SHOWCASE V2 ────────────────────────────────────────────────── */
.showcase-v2 {
  padding: 6rem 0;
  background: linear-gradient(180deg, transparent, rgba(15,20,25,0.02));
}
.showcase-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 3rem;
}
.showcase-card {
  position: relative;
  display: block;
  height: 480px;
  border-radius: 22px;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  isolation: isolate;
  border: 1px solid rgba(15,20,25,0.08);
  transition: all 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.showcase-card:hover {
  transform: translateY(-6px);
  border-color: rgba(185,28,28,0.4);
  box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(185,28,28,0.2);
}
.showcase-img {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.showcase-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.showcase-card:hover .showcase-img img { transform: scale(1.08); }
.showcase-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(15,20,25,0.1) 0%, rgba(15,20,25,0.5) 50%, rgba(15,20,25,0.95) 100%);
}
.showcase-body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2.5rem;
}
.showcase-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.9rem;
  background: rgba(185,28,28,0.15);
  border: 1px solid rgba(185,28,28,0.4);
  border-radius: 999px;
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.showcase-body h3 {
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 0.6rem;
  letter-spacing: -0.02em;
}
.showcase-body p {
  color: rgba(255,255,255,0.75);
  font-size: 1rem;
  margin: 0 0 1.25rem;
  max-width: 90%;
}
.showcase-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--gold);
  font-weight: 600;
  transition: gap 0.25s ease;
}
.showcase-card:hover .showcase-cta { gap: 0.85rem; }

/* ── MARQUEE ────────────────────────────────────────────────────── */
.brands-marquee {
  padding: 3rem 0;
  background: rgba(15,20,25,0.025);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.brands-label {
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-bottom: 1.75rem;
}
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee-track {
  display: inline-flex;
  align-items: center;
  gap: 2.5rem;
  white-space: nowrap;
  animation: marqueeScroll 35s linear infinite;
}
.marquee-item {
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: rgba(15,20,25,0.35);
  transition: color 0.25s ease;
}
.marquee-item:hover { color: var(--gold); }
.marquee-dot {
  color: rgba(185,28,28,0.4);
  font-size: 0.7rem;
}
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── COMING SOON / EMPTY STATE ─────────────────────────────────── */
.coming-soon-section { padding: 5rem 0; }
.coming-soon-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: linear-gradient(180deg, rgba(15,20,25,0.04), rgba(15,20,25,0.01));
  border: 1px solid rgba(15,20,25,0.08);
  border-radius: 24px;
  overflow: hidden;
  min-height: 380px;
}
.cs-img {
  position: relative;
  overflow: hidden;
}
.cs-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: csImgZoom 20s ease-in-out infinite alternate;
}
@keyframes csImgZoom {
  from { transform: scale(1); }
  to   { transform: scale(1.1); }
}
.cs-img-grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 70%, #f7f8fa 100%);
}
.cs-body {
  padding: 3rem 2.75rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.cs-body h2 {
  font-size: 2rem;
  margin: 0.75rem 0 1rem;
  letter-spacing: -0.02em;
}
.cs-body p {
  color: var(--text-muted);
  line-height: 1.65;
  margin: 0 0 1.75rem;
}
.cs-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* ── CTA V2 ─────────────────────────────────────────────────────── */
.cta-v2 {
  position: relative;
  min-height: 460px;
  display: flex;
  align-items: center;
  margin: 6rem 0 0;
  isolation: isolate;
  overflow: hidden;
}
.cta-v2-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.cta-v2-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.4) saturate(1.1);
}
.cta-v2-grad {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 100%, rgba(185,28,28,0.25) 0%, transparent 60%),
    linear-gradient(180deg, rgba(15,20,25,0.55) 0%, rgba(15,20,25,0.85) 100%);
}
.cta-v2-content {
  text-align: center;
  padding: 4rem 1.5rem;
}
.cta-v2-content h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  margin: 0 0 1rem;
  letter-spacing: -0.02em;
  color: #fff;
}
.cta-v2-content p {
  color: rgba(255,255,255,0.8);
  max-width: 560px;
  margin: 0 auto 2rem;
  font-size: 1.1rem;
}
.cta-v2-actions {
  display: flex;
  gap: 0.85rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Header con backdrop más fuerte ────────────────────────────── */
.site-header {
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* ── Responsivo ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .showcase-grid { grid-template-columns: 1fr; }
  .showcase-card { height: 400px; }
  .coming-soon-card { grid-template-columns: 1fr; }
  .cs-img { height: 240px; }
  .cs-img-grad { background: linear-gradient(180deg, transparent 50%, #f7f8fa 100%); }
}
@media (max-width: 640px) {
  .hero-v2 { min-height: 90vh; padding: 5rem 1rem 3rem; }
  .hero-v2-stats { gap: 1.25rem; padding: 1rem 1.25rem; }
  .hero-v2-stats strong { font-size: 1.5rem; }
  .hero-v2-stats span { font-size: 0.7rem; }
  .hero-v2-cta { flex-direction: column; width: 100%; }
  .hero-v2-btn { justify-content: center; width: 100%; }
  .marquee-item { font-size: 1.25rem; }
  .marquee-track { gap: 1.5rem; }
  .showcase-body { padding: 1.75rem; }
  .showcase-body h3 { font-size: 1.5rem; }
  .cs-body { padding: 2rem 1.5rem; }
  .cs-body h2 { font-size: 1.5rem; }
}

/* ═════════════════════════════════════════════════════════════════
   BRAND LOGO — usa /img/logo.png (logo circular metálico)
   ═════════════════════════════════════════════════════════════════ */
.brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--text);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  line-height: 1;
}
.brand-mark {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(185,28,28,0.25), transparent 60%);
  flex-shrink: 0;
  transition: transform 0.3s ease, filter 0.3s ease;
}
.brand-mark::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(185,28,28,0.6), transparent 30%, rgba(185,28,28,0.4) 60%, transparent 80%);
  filter: blur(4px);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: -1;
}
.brand-logo:hover .brand-mark::before { opacity: 1; }
.brand-logo:hover .brand-mark {
  transform: scale(1.05);
  filter: drop-shadow(0 0 12px rgba(185,28,28,0.5));
}
.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.brand-text {
  white-space: nowrap;
  font-weight: 600;
}
.brand-text strong {
  font-weight: 800;
  color: var(--gold);
}

/* Footer / Login: logos más grandes verticales */
.footer-brand .brand-logo,
.auth-logo .brand-logo {
  flex-direction: column;
  gap: 0.85rem;
  align-items: flex-start;
  font-size: 1.15rem;
}
.auth-logo .brand-logo {
  align-items: center;
}
.auth-logo .brand-mark {
  filter: drop-shadow(0 8px 24px rgba(185,28,28,0.35));
}

/* Sidebar admin */
.admin-sidebar-brand .brand-logo { font-size: 0.95rem; }

/* Compatibilidad: el header antes usaba .logo */
.logo { /* fallback por si algún sitio lo usa */
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--text);
}

/* ═════════════════════════════════════════════════════════════════
   LOGO INTEGRATION V2 — más grande, más glow, mejor anidado
   ═════════════════════════════════════════════════════════════════ */

/* Glow exterior para que se integre con cualquier fondo oscuro */
.brand-mark {
  filter: drop-shadow(0 0 1px rgba(15,20,25,0.05))
          drop-shadow(0 6px 20px rgba(0,0,0,0.55));
  transition: transform 0.3s ease, filter 0.3s ease;
}
.brand-logo:hover .brand-mark {
  transform: scale(1.06) rotate(-2deg);
  filter: drop-shadow(0 0 1px rgba(255,255,255,0.1))
          drop-shadow(0 8px 26px rgba(0,0,0,0.6))
          drop-shadow(0 0 18px rgba(185,28,28,0.5));
}

/* Logo en el HERO — gigante y centrado */
.hero-v2-logo {
  width: 160px;
  height: 160px;
  margin: 0 auto 1.5rem;
  position: relative;
  animation: logoFloat 4s ease-in-out infinite alternate;
  filter: drop-shadow(0 16px 50px rgba(0,0,0,0.55))
          drop-shadow(0 0 28px rgba(185,28,28,0.35));
}
.hero-v2-logo::before {
  content: '';
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(185,28,28,0.25) 0%, transparent 65%);
  filter: blur(8px);
  z-index: -1;
  animation: logoPulse 3.5s ease-in-out infinite;
}
.hero-v2-logo img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: block;
  object-fit: cover;
}
@keyframes logoFloat {
  from { transform: translateY(0); }
  to   { transform: translateY(-8px); }
}
@keyframes logoPulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.08); }
}

/* Header — logo in-flow, ya no flotante */
.site-header .brand-logo {
  padding: 0;
  margin: 0;
  align-self: center;
}
.site-header .brand-mark {
  filter: drop-shadow(0 2px 6px rgba(15,20,25,0.12));
}

/* Footer — logo grande con glow más sutil */
.footer-brand .brand-logo {
  margin-bottom: 0.5rem;
}
.footer-brand .brand-mark {
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.5))
          drop-shadow(0 0 16px rgba(185,28,28,0.2));
}

/* Sidebar admin */
.admin-sidebar-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}
.admin-sidebar-brand .brand-mark {
  filter: drop-shadow(0 4px 16px rgba(0,0,0,0.5))
          drop-shadow(0 0 10px rgba(185,28,28,0.22));
}
.admin-badge-label {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(185,28,28,0.12);
  border: 1px solid rgba(185,28,28,0.3);
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-weight: 600;
}

/* Login — logo MUY grande, halo dorado */
.auth-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 1.75rem;
}
.auth-logo .brand-logo { display: inline-block; }
.auth-logo .brand-mark {
  filter: drop-shadow(0 14px 40px rgba(0,0,0,0.6))
          drop-shadow(0 0 30px rgba(185,28,28,0.45));
}
.auth-logo .brand-mark::before {
  content: '';
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(185,28,28,0.3) 0%, transparent 70%);
  filter: blur(15px);
  z-index: -1;
}

/* Título del hero más pequeño cuando el logo está arriba */
.hero-v2-title.hero-v2-title-sm {
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  margin-top: 0.5rem;
}

/* Mobile — escalar logos del header */
@media (max-width: 640px) {
  .hero-v2-logo { width: 120px; height: 120px; }
  .site-header .brand-mark { width: 40px !important; height: 40px !important; }
  .footer-brand .brand-mark { width: 64px !important; height: 64px !important; }
  .admin-sidebar-brand .brand-mark { width: 36px !important; height: 36px !important; }
  .auth-logo .brand-mark { width: 88px !important; height: 88px !important; }
}

/* ═════════════════════════════════════════════════════════════════
   AJUSTES — toggle switch, upload zone del logo, brand-text-only
   ═════════════════════════════════════════════════════════════════ */

/* Header sin logo: muestra el wordmark */
.brand-text-only {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--text);
  white-space: nowrap;
}
.brand-text-only strong {
  color: var(--gold);
  font-weight: 800;
}

/* Toggle switch */
.toggle-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  cursor: pointer;
  user-select: none;
}
.toggle-switch input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.toggle-track {
  width: 52px;
  height: 28px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(15,20,25,0.12);
  border-radius: 999px;
  position: relative;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: left 0.25s ease, background 0.25s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.toggle-switch input:checked + .toggle-track {
  background: rgba(185,28,28,0.35);
  border-color: var(--gold);
}
.toggle-switch input:checked + .toggle-track .toggle-thumb {
  left: 27px;
  background: var(--gold);
}
.toggle-label {
  color: var(--text);
  font-weight: 500;
}

/* Card sub */
.admin-card-sub {
  color: var(--text-muted);
  font-size: 0.92rem;
  margin: -0.5rem 0 1.25rem;
}

/* Logo preview */
.logo-preview {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem;
  background: rgba(15,20,25,0.03);
  border: 1px dashed rgba(15,20,25,0.12);
  border-radius: 12px;
  margin-bottom: 1.5rem;
}
.logo-preview img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.4));
}
.logo-preview-tag {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  background: rgba(185,28,28,0.15);
  border: 1px solid rgba(185,28,28,0.35);
  color: var(--gold);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.logo-preview-default {
  background: rgba(15,20,25,0.05);
  border-color: rgba(15,20,25,0.12);
  color: var(--text-muted);
}

/* Upload zone para el logo */
.logo-upload-zone {
  display: block;
  position: relative;
  cursor: pointer;
  border: 2px dashed rgba(15,20,25,0.12);
  border-radius: 12px;
  padding: 1.5rem;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.logo-upload-zone:hover {
  border-color: var(--gold);
  background: rgba(185,28,28,0.04);
}
.logo-upload-zone input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.logo-upload-inner {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  color: var(--text-muted);
}
.logo-upload-inner svg { color: var(--gold); flex-shrink: 0; }
.logo-upload-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

/* ═════════════════════════════════════════════════════════════════
   BOTÓN FLOTANTE WHATSAPP — visible en todas las páginas
   ═════════════════════════════════════════════════════════════════ */
.wa-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  color: #fff;
  border-radius: 50%;
  box-shadow:
    0 8px 24px rgba(37, 211, 102, 0.45),
    0 4px 12px rgba(0, 0, 0, 0.3);
  text-decoration: none;
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.3, 1.4),
              box-shadow 0.25s ease;
  isolation: isolate;
}
.wa-float::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  z-index: -1;
}
.wa-float-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(37, 211, 102, 0.5);
  z-index: -2;
  animation: waPulse 2.4s ease-out infinite;
}
@keyframes waPulse {
  0%   { transform: scale(1);   opacity: 0.6; }
  70%  { transform: scale(1.6); opacity: 0;   }
  100% { transform: scale(1.6); opacity: 0;   }
}
.wa-float-icon {
  width: 32px;
  height: 32px;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.15));
  transition: transform 0.25s ease;
}
.wa-float:hover {
  transform: scale(1.1) rotate(-6deg);
  box-shadow:
    0 12px 32px rgba(37, 211, 102, 0.6),
    0 6px 16px rgba(0, 0, 0, 0.35);
}
.wa-float:hover .wa-float-icon { transform: scale(1.05); }
.wa-float:active { transform: scale(0.95); }

.wa-float-tooltip {
  position: absolute;
  right: 72px;
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  background: #0f1419;
  color: #fff;
  padding: 0.5rem 0.85rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  box-shadow: 0 4px 12px rgba(15,20,25,0.4);
  border: 1px solid rgba(15,20,25,0.08);
}
.wa-float-tooltip::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -5px;
  transform: translateY(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: #0f1419;
}
.wa-float:hover .wa-float-tooltip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* Footer telefonenlace */
.footer-tel {
  color: var(--text);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-tel:hover { color: var(--gold); }

/* ═════════════════════════════════════════════════════════════════
   RESPONSIVE FULL — tablets y móviles, todos los dispositivos
   ═════════════════════════════════════════════════════════════════ */

/* ── Tablet grande (≤ 1024px) ──────────────────────────────────── */
@media (max-width: 1024px) {
  .container { padding: 0 1.5rem; }
  .nav-container { padding: 0 0.5rem; gap: 1.25rem; }
  .nav-links { gap: 1.25rem; }
  .hero-v2-title { font-size: clamp(2.8rem, 9vw, 7rem); }
  .showcase-grid { gap: 1rem; }
  .showcase-card { height: 420px; }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-grid { flex-wrap: wrap; }
  .step-arrow { display: none; }
  .cars-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  .catalog-layout { grid-template-columns: 1fr; }
  .filters-panel { position: static; }
  .car-detail-grid { grid-template-columns: 1fr; }
  .car-gallery { position: static; }
}

/* ── Tablet (≤ 900px) ──────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Mostrar menú móvil */
  .nav-links { display: none; }
  .nav-actions .btn { display: none; }
  .mobile-menu-btn { display: flex; }
  /* Showcase 1 columna */
  .showcase-grid { grid-template-columns: 1fr; }
  .showcase-card { height: 360px; }
  /* Coming soon 1 columna */
  .coming-soon-card { grid-template-columns: 1fr; }
  .cs-img { height: 220px; }
  /* Stats hero compactos */
  .hero-v2-stats { gap: 1.25rem; padding: 1rem 1.25rem; }
  .hero-v2-stats strong { font-size: 1.5rem; }
  /* Footer 2 columnas */
  .footer-grid { grid-template-columns: 1fr 1fr; }
  /* En tablet podemos ocultar el wordmark (cajas) y dejar solo el círculo del logo */
  .site-header .brand-wordmark { display: none; }
}

/* ── Móvil (≤ 640px) ───────────────────────────────────────────── */
@media (max-width: 640px) {
  :root { --nav-h: 64px; }
  .container { padding: 0 1rem; }
  /* Hero compacto */
  .hero-v2 { min-height: 88vh; padding: 4rem 1rem 3rem; }
  .hero-v2-title { font-size: clamp(2.2rem, 13vw, 4.5rem); }
  .hero-v2-eyebrow { font-size: 0.7rem; padding: 0.4rem 0.85rem; margin-bottom: 1.25rem; }
  .hero-v2-sub { font-size: 0.95rem; margin-bottom: 1.75rem; }
  .hero-v2-stats {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.85rem 1.25rem;
    padding: 0.85rem 1rem;
  }
  .hero-v2-stats .sep { display: none; }
  .hero-v2-stats strong { font-size: 1.35rem; }
  .hero-v2-stats span { font-size: 0.65rem; }
  .hero-v2-cta { flex-direction: column; width: 100%; gap: 0.6rem; }
  .hero-v2-btn { justify-content: center; width: 100%; padding: 0.9rem 1.5rem; }
  /* Showcase compacto */
  .showcase-card { height: 320px; }
  .showcase-body { padding: 1.5rem; }
  .showcase-body h3 { font-size: 1.4rem; }
  .showcase-body p { font-size: 0.92rem; max-width: 100%; }
  /* Sección headers */
  .section-header h2 { font-size: 1.75rem; }
  .section-header p { font-size: 0.95rem; }
  /* Features y steps 1 columna */
  .features-grid { grid-template-columns: 1fr; gap: 1rem; }
  .steps-grid { grid-template-columns: 1fr; gap: 1rem; }
  .step-card { padding: 1.5rem; }
  /* Cars grid */
  .cars-grid { grid-template-columns: 1fr; gap: 1rem; }
  .cars-grid-3 { grid-template-columns: 1fr; }
  /* Marquee slow down */
  .marquee-track { animation-duration: 50s; }
  .marquee-item { font-size: 1.15rem; }
  .marquee-track { gap: 1.25rem; }
  /* Footer 1 columna */
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  /* Coming soon */
  .cs-body { padding: 2rem 1.5rem; }
  .cs-body h2 { font-size: 1.5rem; }
  /* Contact grid */
  .contact-grid { grid-template-columns: 1fr; gap: 1rem; }
  .contact-info-block { grid-template-columns: 1fr; }
  /* CTA v2 */
  .cta-v2 { min-height: 360px; }
  .cta-v2-actions { flex-direction: column; width: 100%; }
  .cta-v2-actions .hero-v2-btn { width: 100%; justify-content: center; }
  /* Quick specs grid */
  .quick-specs-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  /* Car gallery */
  .gallery-thumbs { gap: 0.4rem; }
  .gallery-thumb { width: 70px; height: 50px; }
  /* Admin sidebar mobile */
  .admin-wrapper { grid-template-columns: 1fr; }
  .admin-sidebar { display: none; }
  .admin-main { padding: 1.5rem 1rem; }
  .admin-stats-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  .admin-two-col { grid-template-columns: 1fr; gap: 1rem; }
  /* Botón whatsapp móvil */
  .wa-float {
    width: 56px;
    height: 56px;
    bottom: 18px;
    right: 18px;
  }
  .wa-float-icon { width: 28px; height: 28px; }
  .wa-float-tooltip { display: none; } /* en móvil no hay hover, no sirve */
}

/* ── Móvil pequeño (≤ 380px) ───────────────────────────────────── */
@media (max-width: 380px) {
  .site-header .brand-mark { width: 36px !important; height: 36px !important; }
  .hero-v2-title { font-size: 2rem; }
  .quick-specs-grid { grid-template-columns: 1fr; }
  .admin-stats-grid { grid-template-columns: 1fr; }
}

/* ── Soporte safe-area en iPhone (notch) ───────────────────────── */
@supports (padding: env(safe-area-inset-bottom)) {
  .wa-float {
    bottom: max(24px, env(safe-area-inset-bottom));
    right:  max(24px, env(safe-area-inset-right));
  }
  .site-footer { padding-bottom: env(safe-area-inset-bottom); }
}

/* ── Touch devices: animar el pulso aun sin hover ──────────────── */
@media (hover: none) {
  .wa-float-pulse { animation-duration: 2s; }
}

/* ── Reducir movimiento si el usuario lo prefiere ─────────────── */
@media (prefers-reduced-motion: reduce) {
  .wa-float-pulse,
  .hero-v2-img,
  .hero-v2-mesh,
  .marquee-track,
  .cs-img img,
  .hero-v2-grad-txt {
    animation: none !important;
  }
}

/* ═════════════════════════════════════════════════════════════════
   Catálogo: landing con 4 cards
   ═════════════════════════════════════════════════════════════════ */
.cat-landing { padding: 4rem 0 6rem; }
.cat-landing-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 3.5rem;
}
.cat-landing-head h1 {
  font-size: clamp(2rem, 4vw, 2.75rem);
  margin: 0.75rem 0 1rem;
  letter-spacing: -0.02em;
}
.cat-landing-head p {
  color: var(--text-muted);
  font-size: 1.05rem;
}
.cat-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
.cat-card {
  position: relative;
  display: block;
  height: 460px;
  border-radius: 22px;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  isolation: isolate;
  border: 1px solid var(--border);
  background: var(--card);
  transition: all 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.cat-card:hover {
  transform: translateY(-6px);
  border-color: var(--accent);
  box-shadow: 0 30px 60px rgba(15,20,25,0.16);
}
.cat-card-img { position: absolute; inset: 0; z-index: -2; }
.cat-card-img img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: center 35%;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.cat-card:hover .cat-card-img img { transform: scale(1.07); }
.cat-card-overlay {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
    rgba(15,20,25,0.05) 0%,
    rgba(15,20,25,0.15) 45%,
    rgba(15,20,25,0.78) 80%,
    rgba(15,20,25,0.95) 100%);
}
.cat-card-body {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 2rem;
  display: flex; flex-direction: column; gap: 0.6rem;
}
.cat-card-tag {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.85rem;
  background: rgba(185,28,28,0.22);
  border: 1px solid rgba(185,28,28,0.5);
  color: #fff;
  border-radius: 999px;
  font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  width: fit-content;
}
.cat-card-body h3 {
  font-size: 1.6rem; font-weight: 700;
  margin: 0.3rem 0 0.4rem;
  letter-spacing: -0.02em;
}
.cat-card-body p {
  color: rgba(255,255,255,0.85);
  font-size: 0.95rem;
  margin: 0 0 0.6rem;
  max-width: 95%;
}
.cat-card-meta {
  display: flex; align-items: baseline; gap: 0.5rem;
  margin: 0.4rem 0 0.5rem;
}
.cat-card-count {
  font-size: 1.6rem; font-weight: 800;
  color: var(--accent-light);
  line-height: 1;
}
.cat-card-label {
  color: rgba(255,255,255,0.7);
  font-size: 0.85rem; text-transform: uppercase;
  letter-spacing: 0.05em;
}
.cat-card-meta-pill {
  display: inline-block;
  padding: 0.45rem 0.85rem;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
  color: #fff;
  border-radius: 999px;
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.04em;
  width: fit-content;
  margin: 0.4rem 0 0.5rem;
}
.cat-card-cta {
  display: inline-flex; align-items: center; gap: 0.5rem;
  color: var(--accent-light);
  font-weight: 600;
  font-size: 0.95rem;
  transition: gap 0.25s ease;
}
.cat-card:hover .cat-card-cta { gap: 0.85rem; }
.cat-card-badge {
  position: absolute;
  top: 1rem; right: 1rem;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
  color: #fff;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.05em;
  box-shadow: 0 4px 16px rgba(185,28,28,0.4);
}
.cat-card-carta { /* destacar visualmente la card a la carta */
  border: 1px solid rgba(185,28,28,0.4);
}
@media (max-width: 768px) {
  .cat-cards { grid-template-columns: 1fr; }
  .cat-card { height: 380px; }
}

/* ═════════════════════════════════════════════════════════════════
   Página A la carta — hero + steps + form
   ═════════════════════════════════════════════════════════════════ */
.carta-page { padding: 3rem 0 5rem; }
.carta-hero {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 3rem;
}
.carta-hero h1 {
  font-size: clamp(2rem, 4.5vw, 3rem);
  margin: 0.85rem 0 1.25rem;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.carta-hero-em {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.carta-hero-sub {
  color: var(--text-muted);
  font-size: 1.1rem;
  line-height: 1.65;
}

.carta-how {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin: 0 0 4rem;
}
.carta-step {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.5rem;
  position: relative;
  transition: all 0.25s ease;
}
.carta-step:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(15,20,25,0.06);
}
.carta-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
  color: #fff;
  border-radius: 50%;
  font-weight: 800;
  margin-bottom: 0.85rem;
  box-shadow: 0 4px 12px rgba(185,28,28,0.25);
}
.carta-step h3 { font-size: 1rem; margin-bottom: 0.4rem; }
.carta-step p { color: var(--text-muted); font-size: 0.9rem; line-height: 1.5; }
@media (max-width: 768px) {
  .carta-how { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .carta-how { grid-template-columns: 1fr; }
}

/* ═════════════════════════════════════════════════════════════════
   Sección de formulario (contacto y a la carta)
   ═════════════════════════════════════════════════════════════════ */
.form-section { margin: 4rem 0 0; }
.form-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 2.25rem 2rem;
  box-shadow: var(--shadow);
}
.form-section-title {
  font-size: 1.6rem;
  margin: 0.4rem 0 0.5rem;
  letter-spacing: -0.02em;
}
.form-section-sub {
  color: var(--text-muted);
  margin: 0 0 1.75rem;
  font-size: 0.98rem;
}

.big-form { position: relative; }
.big-form fieldset {
  border: none;
  padding: 0;
  margin: 0 0 1.5rem;
}
.big-form fieldset + fieldset {
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
  margin-top: 1.5rem;
}
.big-form legend {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 1rem;
}
.form-group-full { grid-column: 1 / -1; }
.big-form .form-input.is-error,
.big-form .form-textarea.is-error {
  border-color: var(--error);
  background: rgba(220,38,38,0.04);
}
.big-form .form-input.is-error:focus,
.big-form .form-textarea.is-error:focus {
  outline-color: var(--error);
}
.form-actions-row {
  display: flex; gap: 0.85rem; flex-wrap: wrap;
  margin-top: 1.75rem;
}
.form-actions-row .btn { flex: 1; min-width: 200px; justify-content: center; }
@media (max-width: 540px) {
  .form-card { padding: 1.5rem 1.25rem; }
  .form-actions-row .btn { flex: 1 1 100%; }
}

/* Disclaimer "a la carta" */
.carta-disclaimer {
  background: linear-gradient(135deg, rgba(185,28,28,0.06) 0%, rgba(185,28,28,0.02) 100%);
  border: 1px solid rgba(185,28,28,0.2);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  padding: 1.5rem;
  margin: 2rem 0 1.5rem;
}
.carta-disclaimer p {
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.65;
  margin: 0 0 1.25rem;
}
.carta-disclaimer p strong { color: var(--accent-dark); }
.carta-disclaimer p em { color: var(--accent); font-style: normal; font-weight: 600; }
.carta-acepta {
  display: flex; align-items: flex-start; gap: 0.65rem;
  cursor: pointer;
  padding: 0.75rem;
  background: rgba(255,255,255,0.6);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  transition: all 0.2s ease;
}
.carta-acepta:hover {
  border-color: var(--accent);
}
.carta-acepta.is-error {
  border-color: var(--error);
  background: rgba(220,38,38,0.04);
}
.carta-acepta input[type="checkbox"] {
  margin-top: 3px;
  width: 18px; height: 18px;
  accent-color: var(--accent);
  flex-shrink: 0;
}
.carta-acepta span {
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.45;
}

/* ═════════════════════════════════════════════════════════════════
   Página de gracias
   ═════════════════════════════════════════════════════════════════ */
.thanks-page {
  padding: 4rem 0 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.thanks-card {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 3rem 2.5rem;
  box-shadow: var(--shadow-card);
}
.thanks-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 88px; height: 88px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #fff;
  border-radius: 50%;
  margin-bottom: 1.5rem;
  box-shadow: 0 12px 32px rgba(16, 185, 129, 0.35);
  animation: thanksBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes thanksBounce {
  from { transform: scale(0.4); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.thanks-card h1 {
  font-size: 2.25rem;
  margin: 0.6rem 0 0.85rem;
  letter-spacing: -0.02em;
}
.thanks-sub {
  color: var(--text-muted);
  font-size: 1.05rem;
  line-height: 1.65;
  margin: 0 0 1.75rem;
}
.thanks-sub strong { color: var(--text); }
.thanks-info {
  display: flex; align-items: flex-start; gap: 0.85rem;
  background: rgba(16, 185, 129, 0.06);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 12px;
  padding: 1rem 1.15rem;
  margin: 0 0 1.75rem;
  text-align: left;
}
.thanks-info-icon {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: rgba(16, 185, 129, 0.15);
  color: #059669;
  border-radius: 8px;
}
.thanks-info strong {
  display: block; font-size: 0.95rem; margin-bottom: 0.15rem;
}
.thanks-info p {
  color: var(--text-muted);
  font-size: 0.88rem;
  margin: 0;
  line-height: 1.45;
}
.thanks-info p strong { color: var(--text); display: inline; }
.thanks-actions {
  display: flex; gap: 0.85rem; flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 2rem;
}
.thanks-actions .btn { min-width: 180px; }
.thanks-foot {
  font-size: 0.88rem;
  color: var(--text-muted);
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.thanks-foot a { color: var(--accent); font-weight: 600; }
@media (max-width: 540px) {
  .thanks-card { padding: 2rem 1.5rem; }
  .thanks-card h1 { font-size: 1.75rem; }
  .thanks-actions .btn { width: 100%; }
}

/* ═════════════════════════════════════════════════════════════════
   Header: dropdown de Coches
   ═════════════════════════════════════════════════════════════════ */
.has-dropdown {
  position: relative;
  /* el li ya hereda display:flex/align-items del .nav-links > li */
}
.has-dropdown > a svg { transition: transform 0.2s ease; }
.has-dropdown:hover > a svg,
.has-dropdown:focus-within > a svg { transform: rotate(180deg); }

.nav-dropdown {
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  min-width: 220px;
  /* padding-top crea zona "puente" que mantiene el hover */
  padding-top: 12px;
  margin: 0;
  list-style: none;
  z-index: 100;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.18s ease, visibility 0.18s ease;
  pointer-events: none;
}
.has-dropdown:hover .nav-dropdown,
.has-dropdown:focus-within .nav-dropdown,
.has-dropdown.open .nav-dropdown {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.has-dropdown.open > a svg { transform: rotate(180deg); }
/* El "panel" visible del dropdown es solo el ::before, así dejamos
   un colchón superior invisible que el cursor puede atravesar */
.nav-dropdown::before {
  content: '';
  position: absolute;
  top: 12px;            /* alineado con el inicio del padding-top */
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255,255,255,0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(15,20,25,0.12);
  z-index: -1;
}
.nav-dropdown li {
  position: relative;
  padding: 0 0.5rem;
}
.nav-dropdown li:first-child { padding-top: 0.5rem; }
.nav-dropdown li:last-child  { padding-bottom: 0.5rem; }
.nav-dropdown li a {
  display: block;
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  color: var(--text);
  font-size: 0.95rem;
  transition: background 0.18s ease, color 0.18s ease;
  white-space: nowrap;
}
.nav-dropdown li a:hover,
.nav-dropdown li a:focus {
  background: rgba(185,28,28,0.08);
  color: var(--accent);
}

.mobile-nav-sub {
  padding-left: 1.5rem !important;
  font-size: 0.92rem !important;
  color: var(--text-muted) !important;
}

/* ═════════════════════════════════════════════════════════════════
   PÁGINA TECHOS ELEVABLES
   ═════════════════════════════════════════════════════════════════ */
.techo-page { padding: 3rem 0 5rem; }

.techo-hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 3rem;
  align-items: center;
  margin-bottom: 4rem;
}
.techo-hero-content h1 {
  font-size: clamp(2rem, 4.5vw, 3rem);
  margin: 0.85rem 0 1.25rem;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.techo-hero-em {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.techo-hero-sub {
  color: var(--text-muted);
  font-size: 1.1rem;
  line-height: 1.65;
  margin: 0 0 1.75rem;
}
.techo-hero-actions { display: flex; gap: 0.85rem; flex-wrap: wrap; }
.techo-hero-img {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(15,20,25,0.12);
  background: var(--bg);
  /* Sin aspect-ratio: la imagen Reimo (vertical/poster) controla la altura */
  display: flex;
  align-items: center;
  justify-content: center;
}
.techo-hero-img img {
  width: 100%;
  height: auto;
  max-height: 560px;
  object-fit: contain;  /* muestra la imagen ENTERA, sin recortar */
  display: block;
}
@media (max-width: 900px) {
  .techo-hero { grid-template-columns: 1fr; gap: 2rem; }
  .techo-hero-img img { max-height: 480px; }
}

/* Beneficios */
.techo-benefits {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 4rem;
}
.techo-benefit {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.5rem;
  transition: all 0.25s ease;
}
.techo-benefit:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(15,20,25,0.06);
}
.techo-benefit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  background: rgba(185,28,28,0.10);
  color: var(--accent);
  border-radius: 12px;
  margin-bottom: 1rem;
}
.techo-benefit h3 { font-size: 1rem; margin-bottom: 0.4rem; }
.techo-benefit p { color: var(--text-muted); font-size: 0.9rem; line-height: 1.55; margin: 0; }
@media (max-width: 900px) { .techo-benefits { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .techo-benefits { grid-template-columns: 1fr; } }

/* Cómo funciona */
.techo-how { margin: 0 0 4rem; }
.techo-how-head { text-align: center; max-width: 640px; margin: 0 auto 2.5rem; }
.techo-how-head h2 {
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  margin: 0.6rem 0 0.85rem;
  letter-spacing: -0.02em;
}
.techo-how-head p { color: var(--text-muted); }
.techo-how-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.techo-how-step {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.5rem;
  position: relative;
}
.techo-how-num {
  display: inline-block;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -0.02em;
  margin-bottom: 0.65rem;
}
.techo-how-step h3 { font-size: 1rem; margin-bottom: 0.4rem; }
.techo-how-step p { color: var(--text-muted); font-size: 0.9rem; line-height: 1.5; margin: 0; }
@media (max-width: 900px) { .techo-how-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .techo-how-grid { grid-template-columns: 1fr; } }

/* Note final del formulario de techos */
.techo-note {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.06) 0%, rgba(16, 185, 129, 0.02) 100%);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-left: 3px solid #10b981;
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.55;
}
.techo-note strong { color: #059669; }

/* Card 'techo' en landing /servicios — borde verde sutil */
.cat-card-techo {
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.cat-card-techo:hover {
  border-color: #10b981;
}

/* ═════════════════════════════════════════════════════════════════
   BRAND WORDMARK V2 — réplica del logo (CARS & · CAMPERS) en cajas
   ═════════════════════════════════════════════════════════════════ */
.brand-logo {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.7rem !important;
  text-decoration: none !important;
  flex-shrink: 0;
  flex-direction: row !important;
  font-size: 1rem !important;
  font-weight: 600;
  letter-spacing: 0;
}
.brand-logo:hover { text-decoration: none; }

/* Wordmark: dos cajas pegadas reproduciendo la pildora del logo */
.brand-wordmark {
  display: inline-flex;
  align-items: stretch;
  border-radius: 5px;
  overflow: hidden;
  font-family: 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 900;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0.025em;
  box-shadow: 0 2px 8px rgba(15,20,25,0.10);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.brand-logo:hover .brand-wordmark {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(15,20,25,0.15);
}
.bw-red,
.bw-dark {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 0.65rem;
  color: #fff !important;
  white-space: nowrap;
}
.bw-red  { background: var(--brand-red, #ed1c24) !important; }
.bw-dark { background: var(--brand-dark, #0f1419) !important; }

/* Visor solo para lectores de pantalla */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Marca circular (round badge del logo) — override de las reglas viejas */
.brand-mark {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  background: transparent !important;
  filter: none;
  transition: transform 0.25s ease;
}
.brand-mark::before { display: none !important; }
.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.brand-logo:hover .brand-mark { transform: scale(1.04); }

/* Variantes por contexto */
.brand-logo-header {
  padding: 0;
  margin: 0;
  align-self: center;
}
.brand-logo-header .brand-wordmark { font-size: 0.95rem; }

.brand-logo-footer {
  flex-direction: column !important;
  gap: 0.85rem !important;
  align-items: flex-start !important;
}
.brand-logo-footer .brand-wordmark { font-size: 1.05rem; }

.brand-logo-sidebar { flex-direction: column !important; align-items: flex-start !important; gap: 0.5rem !important; }
.brand-logo-sidebar .brand-wordmark { font-size: 0.78rem; }
.brand-logo-sidebar .bw-red,
.brand-logo-sidebar .bw-dark { padding: 0.35rem 0.5rem; }

.brand-logo-auth {
  flex-direction: column !important;
  gap: 1rem !important;
  align-items: center !important;
}
.brand-logo-auth .brand-mark {
  filter: drop-shadow(0 8px 24px rgba(237,28,36,0.25));
}
.brand-logo-auth .brand-wordmark {
  font-size: 1.25rem;
  box-shadow: 0 6px 18px rgba(15,20,25,0.18);
}

/* Ocultar reglas viejas de brand-text que pueden colarse */
.brand-text { display: none !important; }
.brand-text-only { display: none !important; }

/* Responsive — el wordmark del header se oculta en pantallas estrechas */
@media (max-width: 540px) {
  .brand-logo-header .brand-wordmark { display: none; }
  .brand-logo-footer .brand-wordmark { font-size: 0.95rem; }
  .brand-logo-auth .brand-wordmark { font-size: 1.05rem; }
}

/* ═════════════════════════════════════════════════════════════════
   HEADER RESIZE ON SCROLL — logo grande SOBRESALIENDO al inicio,
   se mete dentro del header al hacer scroll
   ═════════════════════════════════════════════════════════════════ */

/* El header anima su altura entre estado inicial y scrolled.
   overflow:visible para permitir que el logo sobresalga. */
.site-header {
  height: var(--nav-h);
  overflow: visible !important;
  transition: height 0.28s cubic-bezier(0.2, 0.7, 0.3, 1),
              background var(--transition-md),
              border-color var(--transition-md);
}
.site-header.scrolled {
  height: var(--nav-h-scrolled);
}
.nav-container { overflow: visible !important; }

/* Logo flotante: alineado al TOP del header con margin reducido,
   para que sobresalga PROMINENTEMENTE hacia abajo */
.brand-logo-header {
  align-self: flex-start !important;
  margin-top: 6px !important;
  /* z-index moderado: sobre el background del header pero NO encima
     de los menús del propio header (que tiene z-index inherente) */
  position: relative;
  z-index: 1;
}
.brand-logo-header .brand-mark {
  width: 170px;
  height: 170px;
  transition: width 0.32s cubic-bezier(0.2, 0.7, 0.3, 1),
              height 0.32s cubic-bezier(0.2, 0.7, 0.3, 1);
  filter: drop-shadow(0 6px 18px rgba(15,20,25,0.22));
}

/* Estado scrolled: logo se mete DENTRO del header, alineado center */
.site-header.scrolled .brand-logo-header {
  align-self: center !important;
  margin-top: 0 !important;
}
.site-header.scrolled .brand-logo-header .brand-mark {
  width: 44px;
  height: 44px;
  filter: drop-shadow(0 2px 6px rgba(15,20,25,0.12));
}

/* Wordmark grande al inicio, se reduce al scroll */
.brand-logo-header .brand-wordmark {
  font-size: 1.5rem;
  transition: font-size 0.28s ease;
}
.site-header.scrolled .brand-logo-header .brand-wordmark {
  font-size: 0.85rem;
}
.brand-logo-header .bw-red,
.brand-logo-header .bw-dark {
  padding: 0.7rem 0.85rem;
  transition: padding 0.28s ease;
}
.site-header.scrolled .brand-logo-header .bw-red,
.site-header.scrolled .brand-logo-header .bw-dark {
  padding: 0.45rem 0.55rem;
}

/* Padding-top de páginas internas: deja espacio para el logo
   sobresaliendo (logo 170px - header 90px = 86px de overflow + margen) */
.catalog-page,
.car-detail-page,
.inner-page,
.error-page,
.contact-page,
.coming-soon-section,
.carta-page,
.techo-page,
.cat-landing,
.thanks-page {
  padding-top: 130px;
}
.auth-page {
  padding-top: 130px;
  min-height: calc(100vh - 130px);
}

/* Mobile: logo más pequeño pero sigue sobresaliendo un poco */
@media (max-width: 640px) {
  :root {
    --nav-h: 70px;
    --nav-h-scrolled: 56px;
  }
  .brand-logo-header .brand-mark { width: 110px !important; height: 110px !important; }
  .site-header.scrolled .brand-logo-header .brand-mark {
    width: 40px !important; height: 40px !important;
  }
  .catalog-page,
  .car-detail-page,
  .inner-page,
  .error-page,
  .contact-page,
  .coming-soon-section,
  .carta-page,
  .techo-page,
  .cat-landing,
  .thanks-page { padding-top: 100px; }
  .auth-page {
    padding-top: 100px;
    min-height: calc(100vh - 100px);
  }
}
@media (max-width: 380px) {
  .brand-logo-header .brand-mark { width: 88px !important; height: 88px !important; }
  .site-header.scrolled .brand-logo-header .brand-mark {
    width: 36px !important; height: 36px !important;
  }
}

/* ═════════════════════════════════════════════════════════════════
   HOME HERO LOGO — el logo flota grande en el centro del hero
   y se anima de vuelta al header al hacer scroll
   ═════════════════════════════════════════════════════════════════ */

/* Wordmark del header: visible por defecto, se oculta sólo en home-hero */
.brand-logo-header .brand-wordmark {
  opacity: 1;
  transition: opacity 0.45s ease 0.1s,
              font-size 0.28s ease,
              transform 0.45s ease;
}

/* Logo del header: animación suave de transform (movimiento + escala) */
.brand-logo-header .brand-mark {
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1),
              width 0.32s cubic-bezier(0.2, 0.7, 0.3, 1),
              height 0.32s cubic-bezier(0.2, 0.7, 0.3, 1),
              filter 0.4s ease;
  transform-origin: center center;
}

/* Estado HOME-HERO (sin scroll en página principal) */
body.home-hero-active .brand-logo-header .brand-wordmark {
  opacity: 0;
  transform: translateX(-12px);
  pointer-events: none;
}

/* ──────────────────────────────────────────────────────────────────
   HOME-HERO V4: logo en flex normal del header (no fixed) para
   alinearse perfecto con el wordmark. Para llevarlo al centro del
   hero usamos transform translate+scale (animable, sin saltos).
   ────────────────────────────────────────────────────────────────── */

/* Estado normal: logo en flex con el wordmark, separados por gap */
.brand-logo-header {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-direction: row !important;
}
.brand-logo-header .brand-mark {
  position: relative;
  width: 50px;
  height: 50px;
  margin: 0;
  border-radius: 50%;
  overflow: hidden !important;
  flex-shrink: 0;
  transform: translate(0, 0) scale(1);
  transform-origin: center center;
  transition: transform 0.75s cubic-bezier(0.4, 0, 0.2, 1),
              filter 0.5s ease;
  filter: drop-shadow(0 2px 6px rgba(15,20,25,0.18));
  z-index: 51;
}

/* Imagen interior: completa (con object-fit:cover para circular) */
.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  display: block;
}

/* Wordmark: SIN margin-left (el gap del flex hace el espaciado) */
.brand-logo-header .brand-wordmark {
  margin-left: 0;
  transition: opacity 0.5s ease, transform 0.5s ease, font-size 0.5s ease;
}

/* ────────────────────  ESTADO HOME-HERO  ──────────────────── */

/* Logo viaja al centro del viewport con transform (sin cambiar position).
   Centro destino: (50vw, 22vh). Tamaño visual: 50 * 4.4 = 220px. */
body.home-hero-active .brand-logo-header .brand-mark {
  transform: translate(min(607px, calc(50vw - 33px)), calc(22vh - 40px)) scale(4.4);
  filter: drop-shadow(0 18px 44px rgba(15,20,25,0.45))
          drop-shadow(0 0 28px rgba(237,28,36,0.28));
}

/* Wordmark se oculta */
body.home-hero-active .brand-logo-header .brand-wordmark {
  opacity: 0;
  transform: translateX(-12px);
  pointer-events: none;
}

/* Pildora 'SELECCIÓN PREMIUM · BARCELONA' DEBAJO del logo */
.hero-v2-eyebrow {
  transition: opacity 0.55s ease 0.2s,
              transform 0.75s cubic-bezier(0.4, 0, 0.2, 1),
              top 0.75s cubic-bezier(0.4, 0, 0.2, 1),
              left 0.75s cubic-bezier(0.4, 0, 0.2, 1),
              font-size 0.5s ease,
              padding 0.5s ease;
}
body.home-hero-active .hero-v2-eyebrow {
  position: fixed !important;
  top: calc(22vh + 90px) !important; /* solapamiento de 20px con bottom del logo */
  left: 50% !important;
  transform: translate(-50%, 0) !important;
  margin: 0 !important;
  z-index: 52;
  opacity: 1;
  font-size: 0.85rem;
  padding: 0.7rem 1.4rem;
}

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

@media (max-width: 1024px) {
  /* Pantallas medianas: scale ajustado (deltas absolutos) */
  body.home-hero-active .brand-logo-header .brand-mark {
    transform: translate(calc(50vw - 33px), calc(22vh - 40px)) scale(4);
  }
  body.home-hero-active .hero-v2-eyebrow {
    top: calc(22vh + 80px) !important;
  }
}
@media (max-width: 640px) {
  .brand-logo-header .brand-mark { width: 42px; height: 42px; }

  body.home-hero-active .brand-logo-header .brand-mark {
    transform: translate(calc(50vw - 37px), calc(22vh - 35px)) scale(3.4);
  }
  body.home-hero-active .hero-v2-eyebrow {
    top: calc(22vh + 65px) !important;
    font-size: 0.7rem;
    padding: 0.5rem 1rem;
  }
}
@media (max-width: 380px) {
  body.home-hero-active .brand-logo-header .brand-mark {
    transform: translate(calc(50vw - 37px), calc(22vh - 35px)) scale(2.8);
  }
  body.home-hero-active .hero-v2-eyebrow {
    top: calc(22vh + 50px) !important;
  }
}

/* En home-hero: empujar el contenido del hero (título, subtítulo, etc)
   hacia abajo para que no se solape con el logo + pildora flotantes */
body.home-hero-active .hero-v2 {
  padding-top: 19rem;
}
@media (max-width: 1024px) {
  body.home-hero-active .hero-v2 { padding-top: 17rem; }
}
@media (max-width: 768px) {
  body.home-hero-active .hero-v2 { padding-top: 18rem; }
}
@media (max-width: 640px) {
  body.home-hero-active .hero-v2 { padding-top: 17rem; }
}
@media (max-width: 380px) {
  body.home-hero-active .hero-v2 { padding-top: 15rem; }
}

/* ═════════════════════════════════════════════════════════════════
   AJUSTES FINALES: header compacto en TODAS las páginas
   ═════════════════════════════════════════════════════════════════ */
.brand-logo-header .brand-mark {
  width: 44px !important;
  height: 44px !important;
}
.brand-logo-header .brand-wordmark {
  font-size: 0.85rem !important;
}
.brand-logo-header .bw-red,
.brand-logo-header .bw-dark {
  padding: 0.45rem 0.55rem !important;
}

/* En home-hero, el logo se sigue viendo grande gracias al transform.
   Como el tamaño base bajó de 50 a 44, ajusto el scale para mantener
   los 220px visuales (220 / 44 = 5) */
body.home-hero-active .brand-logo-header .brand-mark {
  transform: translate(min(607px, calc(50vw - 33px)), calc(22vh - 40px)) scale(5) !important;
}
@media (max-width: 1024px) {
  body.home-hero-active .brand-logo-header .brand-mark {
    transform: translate(calc(50vw - 33px), calc(22vh - 40px)) scale(4.5) !important;
  }
}
@media (max-width: 640px) {
  body.home-hero-active .brand-logo-header .brand-mark {
    transform: translate(calc(50vw - 33px), calc(22vh - 35px)) scale(3.8) !important;
  }
}
@media (max-width: 380px) {
  body.home-hero-active .brand-logo-header .brand-mark {
    transform: translate(calc(50vw - 33px), calc(22vh - 35px)) scale(3.2) !important;
  }
}

/* Footer brand: centrado y logo grande (3x el tamaño anterior) */
.footer-brand {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.brand-logo-footer {
  flex-direction: column !important;
  align-items: center !important;
  gap: 1rem !important;
}
.brand-logo-footer .brand-mark {
  width: 180px !important;
  height: 180px !important;
}
.brand-logo-footer .brand-wordmark {
  font-size: 1.4rem !important;
}
.brand-logo-footer .bw-red,
.brand-logo-footer .bw-dark {
  padding: 0.7rem 1rem !important;
}
.footer-brand .footer-tagline {
  margin-top: 1rem;
  max-width: 320px;
}
.footer-brand .footer-badges {
  align-items: center;
}
@media (max-width: 900px) {
  .brand-logo-footer .brand-mark {
    width: 140px !important;
    height: 140px !important;
  }
  .brand-logo-footer .brand-wordmark { font-size: 1.2rem !important; }
}

/* Eslogan final de la página de techos elevables */
.techo-eslogan {
  margin: 5rem 0 2rem;
  padding: 4rem 2rem;
  background: linear-gradient(135deg, rgba(237,28,36,0.08) 0%, rgba(15,20,25,0.04) 100%);
  border: 1px solid rgba(237,28,36,0.18);
  border-radius: 22px;
  text-align: center;
}
.techo-eslogan-inner {
  max-width: 760px;
  margin: 0 auto;
}
.techo-eslogan-tag {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  background: rgba(237,28,36,0.12);
  border: 1px solid rgba(237,28,36,0.3);
  padding: 0.45rem 1rem;
  border-radius: 999px;
  margin-bottom: 1.5rem;
}
.techo-eslogan-text {
  font-size: clamp(1.6rem, 3.5vw, 2.5rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--text);
}
.techo-eslogan-em {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.techo-eslogan-em strong {
  font-weight: 900;
}
@media (max-width: 640px) {
  .techo-eslogan { padding: 2.5rem 1.25rem; margin: 3rem 0 1rem; }
}

/* ═════════════════════════════════════════════════════════════════
   FOOTER REORGANIZADO: brand en una FILA superior centrada,
   y debajo las 3 columnas de links (Navegación / Catálogo / Contacto)
   ═════════════════════════════════════════════════════════════════ */
.footer-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  grid-template-areas:
    "brand brand brand"
    "nav   cat   contact" !important;
  gap: 2.5rem 3rem !important;
  margin-bottom: 3.5rem !important;
}
.footer-brand {
  grid-area: brand !important;
  text-align: center !important;
  align-items: center !important;
  display: flex !important;
  flex-direction: column !important;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.5rem;
}
.footer-grid > .footer-col:nth-of-type(1) { grid-area: nav; }
.footer-grid > .footer-col:nth-of-type(2) { grid-area: cat; }
.footer-grid > .footer-col:nth-of-type(3) { grid-area: contact; }

/* Logo del footer: tamaño más equilibrado (era 180px → 140px) */
.brand-logo-footer .brand-mark {
  width: 140px !important;
  height: 140px !important;
}
.brand-logo-footer .brand-wordmark {
  font-size: 1.25rem !important;
}
.footer-brand .footer-tagline {
  margin: 1rem auto 0;
  text-align: center;
  max-width: 360px;
}
.footer-brand .footer-badges {
  flex-direction: row !important;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1rem;
  gap: 0.6rem !important;
}

@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
      "brand brand"
      "nav   cat"
      "contact contact" !important;
  }
  .brand-logo-footer .brand-mark { width: 120px !important; height: 120px !important; }
}
@media (max-width: 480px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "brand"
      "nav"
      "cat"
      "contact" !important;
    gap: 2rem !important;
  }
  .brand-logo-footer .brand-mark { width: 100px !important; height: 100px !important; }
  .brand-logo-footer .brand-wordmark { font-size: 1.1rem !important; }
}

/* ═════════════════════════════════════════════════════════════════
   AJUSTE FINO DEL HEADER NAV: padding interno uniforme +
   gap consistente para que todos los items luzcan equilibrados
   independientemente de si tienen flecha de dropdown o no
   ═════════════════════════════════════════════════════════════════ */
.nav-links {
  gap: 1.25rem !important;
}
.nav-links > li > a {
  padding: 0.5rem 0.65rem !important;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  border-radius: 6px;
  border-bottom: 2px solid transparent;
  transition: background 0.18s ease, color var(--transition), border-color var(--transition);
}
.nav-links > li > a:hover {
  background: rgba(237,28,36,0.06);
  color: var(--text);
}
.nav-links > li > a.active {
  border-bottom-color: var(--accent);
}
/* La flecha ▾ del dropdown: tamaño fijo y opacity sutil para que
   ocupe espacio visual mínimo y el item no parezca más grande */
.has-dropdown > a > svg {
  width: 10px;
  height: 10px;
  opacity: 0.6;
  flex-shrink: 0;
}
.has-dropdown > a:hover > svg { opacity: 1; }

/* ═════════════════════════════════════════════════════════════════
   RESET FINAL DEFINITIVO del header brand-logo
   Pisa todas las reglas dispersas anteriores con !important
   ═════════════════════════════════════════════════════════════════ */
.site-header .brand-logo-header,
.brand-logo-header {
  display: inline-flex !important;
  align-items: center !important;
  align-self: center !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 12px !important;
  flex-direction: row !important;
}

.brand-logo-header .brand-mark {
  width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  filter: drop-shadow(0 2px 6px rgba(15,20,25,0.15));
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1),
              filter 0.4s ease !important;
}

@media (max-width: 640px) {
  .brand-logo-header .brand-mark {
    width: 38px !important;
    height: 38px !important;
  }
}

/* En home-hero el transform aplica para mover/escalar al centro */
body.home-hero-active .brand-logo-header .brand-mark {
  transform: translate(min(607px, calc(50vw - 33px)), calc(22vh - 40px)) scale(5) !important;
  filter: drop-shadow(0 18px 44px rgba(15,20,25,0.45))
          drop-shadow(0 0 28px rgba(237,28,36,0.28)) !important;
}
@media (max-width: 1024px) {
  body.home-hero-active .brand-logo-header .brand-mark {
    transform: translate(calc(50vw - 33px), calc(22vh - 40px)) scale(4.5) !important;
  }
}
@media (max-width: 640px) {
  body.home-hero-active .brand-logo-header .brand-mark {
    transform: translate(calc(50vw - 30px), calc(22vh - 35px)) scale(4) !important;
  }
}
@media (max-width: 380px) {
  body.home-hero-active .brand-logo-header .brand-mark {
    transform: translate(calc(50vw - 30px), calc(22vh - 35px)) scale(3.5) !important;
  }
}

/* ═════════════════════════════════════════════════════════════════
   RESPONSIVE FINAL — móvil/tablet
   ═════════════════════════════════════════════════════════════════ */

/* Tablet (≤768px): pildora más arriba, título más controlado */
@media (max-width: 768px) {
  body.home-hero-active .hero-v2-eyebrow {
    top: calc(22vh + 80px) !important;
    font-size: 0.78rem !important;
    padding: 0.55rem 1.1rem !important;
  }
  body.home-hero-active .brand-logo-header .brand-mark {
    transform: translate(calc(50vw - 33px), calc(22vh - 40px)) scale(4.2) !important;
  }
}

/* Móvil (≤640px): logo y pildora más sutiles, título acotado */
@media (max-width: 640px) {
  body.home-hero-active .brand-logo-header .brand-mark {
    transform: translate(calc(50vw - 30px), calc(22vh - 35px)) scale(3.6) !important;
  }
  body.home-hero-active .hero-v2-eyebrow {
    top: calc(22vh + 65px) !important;
    font-size: 0.7rem !important;
    padding: 0.5rem 0.9rem !important;
    white-space: normal !important;
    text-align: center;
    max-width: 86vw;
  }
  /* Título un poco más pequeño en móvil */
  .hero-v2-title { font-size: clamp(2rem, 12vw, 3.5rem) !important; }
  .hero-v2-sub { font-size: 0.92rem !important; padding: 0 0.5rem; }
  .hero-v2-stats {
    flex-wrap: wrap;
    gap: 0.6rem 1.5rem !important;
    padding: 0.85rem 1rem !important;
  }
}

/* Móvil pequeño (≤400px) */
@media (max-width: 400px) {
  body.home-hero-active .brand-logo-header .brand-mark {
    transform: translate(calc(50vw - 30px), calc(22vh - 35px)) scale(3) !important;
  }
  body.home-hero-active .hero-v2-eyebrow {
    top: calc(22vh + 55px) !important;
    font-size: 0.65rem !important;
    padding: 0.4rem 0.75rem !important;
  }
  .hero-v2-title { font-size: clamp(1.7rem, 11vw, 3rem) !important; }
}

/* Imagen Reimo en móvil: más compacta */
@media (max-width: 640px) {
  .techo-hero-img img { max-height: 380px; }
}

/* Showcase y otros elementos: asegurar que en móvil están bien */
@media (max-width: 640px) {
  .cars-grid, .cars-grid-3 {
    grid-template-columns: 1fr !important;
  }
  .container { padding: 0 1rem !important; }
}

/* ═════════════════════════════════════════════════════════════════
   FIX MOBILE: forzar el contenido del hero a empezar exactamente
   donde debe (sin centrado vertical) en home-hero
   ═════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  body.home-hero-active .hero-v2 {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding-top: 19rem !important;
    min-height: auto !important;
  }
  body.home-hero-active .hero-v2-content {
    margin-top: 0 !important;
  }
}
@media (max-width: 640px) {
  body.home-hero-active .hero-v2 {
    padding-top: 18rem !important;
  }
  body.home-hero-active .hero-v2-eyebrow {
    top: calc(22vh + 60px) !important;
  }
  /* Título un poco más compacto en mobile para que respire */
  .hero-v2-title { font-size: clamp(1.9rem, 10vw, 3rem) !important; }
  .hero-v2-title.hero-v2-title-sm { font-size: clamp(1.6rem, 8vw, 2.5rem) !important; }
}
@media (max-width: 400px) {
  body.home-hero-active .hero-v2 {
    padding-top: 16rem !important;
  }
  body.home-hero-active .hero-v2-eyebrow {
    top: calc(22vh + 50px) !important;
  }
  .hero-v2-title { font-size: clamp(1.6rem, 9vw, 2.5rem) !important; }
}

/* ═════════════════════════════════════════════════════════════════
   FIX MOBILE V2: en mobile el .hero-v2 cambia a display:block
   para evitar que el flex centre verticalmente el contenido
   y quede pegado a la pildora flotante
   ═════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  body.home-hero-active .hero-v2 {
    display: block !important;
    min-height: 100vh !important;
    padding-top: 360px !important;
    padding-bottom: 4rem !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
  body.home-hero-active .hero-v2-content {
    position: relative !important;
    z-index: 2;
    margin: 0 auto !important;
    max-width: 100%;
    text-align: center;
  }
  body.home-hero-active .hero-v2-bg,
  body.home-hero-active .hero-v2-mesh,
  body.home-hero-active .hero-v2-grad {
    position: absolute !important;
    inset: 0 !important;
  }
}
@media (max-width: 640px) {
  body.home-hero-active .hero-v2 {
    padding-top: 320px !important;
  }
}
@media (max-width: 400px) {
  body.home-hero-active .hero-v2 {
    padding-top: 280px !important;
  }
}

/* MOBILE: efecto logo flotante CENTRADO + comportamiento de scroll
   igual que desktop, pero con escalas y posiciones adaptadas.
   Logo y pildora MÁS ARRIBA, contenido MÁS ABAJO */
@media (max-width: 768px) {
  body.home-hero-active .brand-logo-header .brand-mark {
    position: fixed !important;
    top: calc(16vh + 25px) !important;
    left: 50% !important;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) scale(4.35) !important;
    z-index: 50 !important;
    filter: drop-shadow(0 14px 36px rgba(15,20,25,0.4))
            drop-shadow(0 0 22px rgba(237,28,36,0.25)) !important;
  }
  body.home-hero-active .brand-logo-header .brand-wordmark {
    opacity: 0 !important;
    pointer-events: none !important;
  }
  body.home-hero-active .hero-v2-eyebrow {
    position: fixed !important;
    top: calc(16vh + 145px) !important;
    left: 50% !important;
    transform: translate(-50%, 0) !important;
    margin: 0 !important;
    z-index: 51 !important;
    opacity: 1 !important;
    font-size: 0.72rem !important;
    padding: 0.5rem 1rem !important;
    white-space: nowrap !important;
    pointer-events: auto !important;
  }
  body.home-hero-active .hero-v2 {
    display: block !important;
    padding: 380px 1.25rem 4rem !important;
    min-height: 100vh !important;
  }
  body.home-hero-active .hero-v2-content {
    margin: 0 auto !important;
    padding: 0 !important;
    max-width: 100%;
    text-align: center;
  }
}
@media (max-width: 640px) {
  body.home-hero-active .brand-logo-header .brand-mark {
    top: calc(15vh + 25px) !important;
    transform: translate(-50%, -50%) scale(3.95) !important;
  }
  body.home-hero-active .hero-v2-eyebrow {
    top: calc(15vh + 130px) !important;
  }
  body.home-hero-active .hero-v2 {
    padding-top: 340px !important;
  }
}
@media (max-width: 400px) {
  body.home-hero-active .brand-logo-header .brand-mark {
    top: calc(14vh + 25px) !important;
    transform: translate(-50%, -50%) scale(3.55) !important;
  }
  body.home-hero-active .hero-v2-eyebrow {
    top: calc(14vh + 120px) !important;
    font-size: 0.65rem !important;
  }
  body.home-hero-active .hero-v2 {
    padding-top: 300px !important;
  }
}

/* ═════════════════════════════════════════════════════════════════
   AJUSTE FINAL DESKTOP (≥769px): logo flotante en hero.
   Usa position:fixed + top/left en vh — igual que mobile — para que
   el zoom del navegador no descoloque el logo. Antes usaba un
   translate() desde la posición natural del header y al hacer zoom
   se descompensaba (el logo se metía sobre el header o se iba a
   sitios raros de la pantalla).
   ═════════════════════════════════════════════════════════════════ */
/* ═════════════════════════════════════════════════════════════════
   STACK VERTICAL CONSISTENTE (DESKTOP ≥769px):
   - Logo: se queda en su sitio natural del header pero con un
     transform que lo lleva al centro del hero. Como transform
     es animable, la transición a la esquina al hacer scroll vuelve
     a funcionar.
   - Todo CSS px (sin vh) → 100% predecible a cualquier zoom.
   - Pildora, título, subtítulo, contador y CTAs en flow vertical
     dentro de .hero-v2-content como flex column con gap.
   ═════════════════════════════════════════════════════════════════ */
/* Cambio min-width: 769→481 para que aplique también al hacer
   zoom in en desktop (viewport CSS baja de 768) y evitar que
   se activen las reglas mobile con vh que solapan el header. */
@media (min-width: 481px) {
  /* Logo: translate desde posición natural en header al centro.
     X: min(50vw - 54, 618) porque el nav-container tiene
        max-width: 1280 + margin auto. A partir de vw=1344 el
        contenedor se centra y el logo natural se aleja del
        borde izquierdo → translate X se satura en 618px.
     Y: 200px constantes (logo natural ≈45 → center llega a 245). */
  body.home-hero-active .brand-logo-header .brand-mark {
    transform: translate(min(calc(50vw - 54px), 618px), 200px) scale(6) !important;
    width: 44px !important;
    height: 44px !important;
    filter: drop-shadow(0 18px 44px rgba(15,20,25,0.45))
            drop-shadow(0 0 28px rgba(237,28,36,0.28)) !important;
  }
  /* Pildora vuelve a FLOW (no position:fixed) */
  body.home-hero-active .hero-v2-eyebrow {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    z-index: auto !important;
    margin: 0 !important;
    font-size: 0.95rem !important;
    padding: 0.55rem 1.15rem !important;
    white-space: nowrap !important;
  }
  /* Hero: contenido al top, padding fijo en CSS px */
  body.home-hero-active .hero-v2 {
    align-items: flex-start !important;
    padding-top: 400px !important;
  }
  /* Stack vertical con gap consistente */
  body.home-hero-active .hero-v2-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 1.5rem !important;
    width: 100%;
  }
  body.home-hero-active .hero-v2-content > * {
    margin: 0 !important;
  }
}

/* ═════════════════════════════════════════════════════════════════
   MOBILE: wordmark del header VISIBLE cuando NO es home-hero
   (cuando el usuario hace scroll y el logo va arriba a la izquierda)
   Anula los display:none antiguos en mobile/tablet.
   ═════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .site-header .brand-logo-header .brand-wordmark,
  .brand-logo-header .brand-wordmark {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
  }
  .brand-logo-header .bw-red,
  .brand-logo-header .bw-dark {
    padding: 0.32rem 0.45rem !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.02em;
  }
  /* En home-hero el wordmark sigue oculto (logo grande centrado) */
  body.home-hero-active .brand-logo-header .brand-wordmark {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateX(-12px);
  }
}
@media (max-width: 540px) {
  .brand-logo-header .brand-wordmark {
    display: inline-flex !important;
  }
  .brand-logo-header .bw-red,
  .brand-logo-header .bw-dark {
    padding: 0.28rem 0.4rem !important;
    font-size: 0.65rem !important;
  }
}
@media (max-width: 380px) {
  .brand-logo-header .bw-red,
  .brand-logo-header .bw-dark {
    padding: 0.25rem 0.35rem !important;
    font-size: 0.58rem !important;
  }
}

/* ═════════════════════════════════════════════════════════════════
   MOBILE: cuando el menú hamburguesa está abierto, ocultar el logo
   flotante y la pildora "Selección Premium" para que no se vean
   por encima del menú desplegado.
   ═════════════════════════════════════════════════════════════════ */
body.mobile-menu-open .brand-logo-header .brand-mark,
body.mobile-menu-open .hero-v2-eyebrow {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* ═════════════════════════════════════════════════════════════════
   ZOOM: suprimir transiciones del logo durante resize / zoom.
   El transform del logo usa 50vw; al hacer zoom el viewport CSS
   cambia y la transición animaría 0.7s "deslizándose" hasta el
   nuevo centro. Esta clase la añade main.js durante 200ms tras
   cada resize para que el logo salte instantáneamente al nuevo
   sitio sin animación. Las animaciones de scroll siguen funcionando.
   ═════════════════════════════════════════════════════════════════ */
body.disable-logo-transition .brand-logo-header .brand-mark {
  transition: none !important;
}