/* =============================================================================
   CRAUTOS REDISEÑO — MINIMAL AUTOMOTIVE PLATFORM
   ========================================================================== */

/* ----------  TOKENS ---------- */
:root {
  /* ── Base dark palette · fondo #2a2e3f ── */
  --bg-body:      #2a2e3f;
  --ink:          #EDF0F7;
  --ink-soft:     #A9B2CC;
  --paper:        #343849;
  --paper-warm:   #3c4157;
  --paper-deep:   #232636;
  --accent:       #E8614E;
  --accent-deep:  #C8412B;
  --metal:        #6E7898;
  --metal-soft:   #9BA3BB;
  --verified:     #27C280;
  --verified-soft:#1FA869;
  --amber:        #F0A83A;
  --line:         rgba(255, 255, 255, 0.08);
  --line-strong:  rgba(255, 255, 255, 0.16);

  /* Glass surfaces */
  --glass-header: rgba(30, 34, 51, 0.92);
  --glass-card:   rgba(52, 56, 73, 0.92);

  /* Typography */
  --font-display: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Eco / EV palette — brighter for dark bg */
  --eco:          #2DBF7A;
  --eco-soft:     rgba(45, 191, 122, 0.12);
  --eco-border:   rgba(45, 191, 122, 0.28);
  --finance:      #5B9CF6;
  --finance-soft: rgba(91, 156, 246, 0.12);
  --finance-border:rgba(91, 156, 246, 0.28);

  /* Spacing scale (8px base) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* Shadows — deeper on dark */
  --shadow-sm:    0 1px 2px rgba(0,0,0,0.3),  0 2px 4px rgba(0,0,0,0.2);
  --shadow-md:    0 2px 4px rgba(0,0,0,0.3),  0 8px 16px rgba(0,0,0,0.25);
  --shadow-lg:    0 4px 8px rgba(0,0,0,0.35), 0 24px 48px rgba(0,0,0,0.4);
  --shadow-hover: 0 6px 12px rgba(0,0,0,0.4), 0 32px 64px rgba(0,0,0,0.5);

  /* Radii */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 14px;
  --r-4: 20px;
  --r-pill: 999px;

  /* Layout */
  --max-w: 1440px;
  --header-h: 72px;

  /* Transitions */
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

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

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  /* En teléfonos, el overflow-x de body solo no alcanza: si algo se sale a lo
     ancho (p. ej. el header viejo, 476px), Chrome móvil agranda el viewport
     de layout y la página queda vista "por una ventana" más angosta, con la
     grilla cortada a la derecha. El clip en html lo impide. Tiene que ser
     clip (no hidden) acá y en body: con hidden, body pasa a ser contenedor de
     scroll y el header sticky deja de pegarse. */
  overflow-x: clip;
}

body {
  font-family: var(--font-sans);
  background: var(--bg-body);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  min-height: 100vh;
  position: relative;
  overflow-x: clip;
}

/* Grain overlay — atmosphere */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* ----------  TYPOGRAPHY UTILITIES ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.022em;
}

.display-italic {
  font-style: italic;
  font-weight: 800;
  letter-spacing: -0.026em;
  color: var(--accent);
}

.display-underline {
  font-style: normal;
  font-weight: inherit;
  letter-spacing: inherit;
  color: inherit;
}

.mono {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum' 1;
  letter-spacing: -0.01em;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--metal);
  font-weight: 500;
}

/* ============================================================================
   APP SHELL — VIEW SWITCHER
   ========================================================================= */
/* Columna de alto completo: la vista activa crece y empuja el footer al pie de
   la ventana, así las vistas cortas (p. ej. Autos premium) no lo dejan flotando
   a media pantalla. */
#app { position: relative; z-index: 2; display: flex; flex-direction: column; min-height: 100vh; }

.view {
  display: none;
  animation: viewIn 600ms var(--ease-expo);
}
.view.is-active { display: block; flex: 1 0 auto; width: 100%; }

@keyframes viewIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================================
   HEADER
   ========================================================================= */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--glass-header);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--s-6);
  height: var(--header-h);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-7);
}

/* Marca: siempre "crautos.com", todo en minúscula y a un solo tamaño.
   El punto decorativo que iba después del logotipo se eliminó: lo reemplaza
   el ".com" del propio nombre. */
.logo {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.04em;
  text-transform: lowercase;
}
.logo span { color: var(--accent); }

/* Etiqueta "Prototipo" junto al logo del header — solo para desarrollo, siempre
   visible (también en mobile). Se borra junto con su <span> en index.html. */
.logo-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
/* Contenedor de la etiqueta + su flecha. La flecha va fuera de la caja (en el
   hueco entre el logo y el menú), así no suma ancho a la etiqueta. Contraída,
   el contenedor sale del flujo (absolute) y el logo queda solo en su columna:
   el menú vuelve a su posición exacta, sin la etiqueta. */
.dev-proto {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.dev-proto-toggle {
  position: absolute;
  top: 50%;
  left: calc(100% + var(--s-2));
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color 150ms, border-color 150ms, background 150ms;
}
.dev-proto-toggle:hover { color: var(--ink); border-color: var(--ink-soft); background: var(--line); }
.dev-proto-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dev-proto-toggle svg { transition: transform 200ms var(--ease-out); }
/* Expandida, la flecha cuelga fuera de la caja: se reserva su lugar para que   no quede pegada a "Comprar" en anchos medianos (~1300px). */.logo-wrap:has(.dev-proto:not(.is-collapsed)) { margin-right: var(--s-6); }
.dev-proto.is-collapsed {
  position: absolute;
  top: 50%;
  left: calc(100% + var(--s-2));
  transform: translateY(-50%);
}
/* Contraída: queda el bloque claro de versión ("V8.1") con la flecha pegada
   como un segmento del mismo bloque (apunta a la derecha = desplegar). Así
   bloque + flecha miden ~60px y caben en el hueco de 80px entre el logo y el
   menú sin empujarlo; con la flecha suelta al lado quedaba pegada a "Comprar". */
.dev-proto.is-collapsed { align-items: stretch; }
.dev-proto.is-collapsed .dev-proto-tag { border: 0; border-radius: var(--r-2) 0 0 var(--r-2); }
.dev-proto.is-collapsed .dev-proto-tag-body { display: none; }
.dev-proto.is-collapsed .dev-proto-tag-ver { padding: var(--s-1) 6px; font-size: 12px; letter-spacing: 0; }
.dev-proto.is-collapsed .dev-proto-toggle {
  position: static;
  transform: none;
  width: 18px;
  height: auto;
  border: 0;
  border-left: 1px solid rgba(35, 38, 54, 0.2);
  border-radius: 0 var(--r-2) var(--r-2) 0;
  background: var(--ink);
  color: var(--paper-deep);
}
.dev-proto.is-collapsed .dev-proto-toggle:hover { background: var(--ink-soft); color: var(--paper-deep); }
.dev-proto.is-collapsed .dev-proto-toggle svg { width: 12px; height: 12px; transform: rotate(180deg); }
.dev-proto-tag {
  flex-shrink: 0;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--accent);
  border-radius: var(--r-2);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.3;
  white-space: nowrap;
}
/* La versión es un bloque claro a la izquierda, a todo el alto de la etiqueta. */
.dev-proto-tag-ver {
  display: grid;
  place-items: center;
  padding: 0 var(--s-3);
  background: var(--ink);
  color: var(--paper-deep);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.dev-proto-tag-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s-1) var(--s-3);
}
.dev-proto-tag-title {
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.dev-proto-tag-date {
  color: var(--ink-soft);
  font-weight: 500;
  letter-spacing: 0.02em;
}
/* Escritorio angosto (901–1400px): la etiqueta completa no cabe junto al menú
   y se montaba sobre "Comprar". Ahí se muestra siempre compacta —solo el
   bloque V8, fuera del flujo, en el hueco entre logo y menú— sin flecha,
   porque expandirla no tendría dónde ir. Usa los cortes existentes 901/1400. */
@media (min-width: 901px) and (max-width: 1400px) {
  .logo-wrap:has(.dev-proto:not(.is-collapsed)) { margin-right: 0; }
  .dev-proto,
  .dev-proto.is-collapsed {
    position: absolute;
    top: 50%;
    left: calc(100% + var(--s-2));
    transform: translateY(-50%);
  }
  .dev-proto .dev-proto-tag { border-color: transparent; }
  .dev-proto .dev-proto-tag-body,
  .dev-proto .dev-proto-toggle { display: none; }
  .dev-proto .dev-proto-tag-ver { padding: var(--s-1) 6px; font-size: 12px; letter-spacing: 0; }
}
@media (max-width: 900px) {
  /* Tablet y móvil (≤900px): la etiqueta va bajo el logo; al lado no cabe junto a los botones. */
  .logo-wrap { flex-direction: column; align-items: flex-start; gap: var(--s-1); }
  .dev-proto-tag { font-size: 8px; }
  .dev-proto-tag-ver { padding: 0 var(--s-2); font-size: 13px; }
  .dev-proto-tag-body { padding: 1px var(--s-2); }
  .dev-proto-tag-title { letter-spacing: 0.04em; }
  .dev-proto-tag-date { letter-spacing: 0; }
}

.nav-primary {
  display: flex;
  gap: var(--s-6);
  align-items: center;
  align-self: stretch;
  justify-self: start;
  margin-left: var(--s-6);
}
.nav-primary a {
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  position: relative;
  padding: 4px 0;
  transition: color 200ms;
}
.nav-primary a:hover { color: var(--ink); }
.nav-primary a::after {
  content: '';
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--accent);
  transition: right 300ms var(--ease-out);
}
.nav-primary a:hover::after { right: 0; }
.nav-primary a.is-active { color: var(--ink); }
.nav-primary a.is-active::after { right: 0; }

/* ── Submenú desktop de "Comprar": franja horizontal a todo el ancho,
   pegada al borde inferior del header (no un popup flotante) ── */
/* align-self: stretch + flex hace que la caja de este item ocupe todo el
   alto del header (no solo el alto de línea del link), así el :hover no se
   pierde en el hueco entre el link y el submenú (position: fixed, pegado
   al borde inferior del header) al bajar el mouse hacia él. */
.nav-item-dropdown { position: relative; align-self: stretch; display: flex; align-items: center; }
.nav-dropdown-menu {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  background: var(--paper-deep);
  border-bottom: 2px solid var(--accent);
  box-shadow: var(--shadow-lg);
  display: none;
  z-index: 100;
}
/* El submenú es una franja a todo el ancho (0 a 1280px) mientras el trigger
   "Comprar" es un link angosto a media altura del header: un mouse que baja
   en diagonal hacia un ítem del submenú (p. ej. "Usados", más a la izquierda)
   puede cruzar por encima del fondo del header —fuera de ambas cajas— antes
   de entrar al submenú, cortando el :hover. Por eso el estado abierto lo
   controla JS (wireNavComprarDropdown) con un pequeño margen de cierre
   (.is-open), y :hover queda solo como refuerzo para el caso sin gap.
   :focus-within cubre navegación por teclado. */
.nav-item-dropdown:hover .nav-dropdown-menu,
.nav-item-dropdown.is-open .nav-dropdown-menu,
.nav-item-dropdown:focus-within .nav-dropdown-menu { display: block; }
/* Tras elegir una opción, el panel se cierra aunque el mouse siga encima
   (o el link conserve el foco). El estado se limpia al salir del área, así
   que un nuevo hover vuelve a abrirlo. */
.nav-item-dropdown.is-dismissed .nav-dropdown-menu { display: none !important; }
.nav-comprar-chevron {
  margin-left: 3px;
  vertical-align: -2px;
  transition: transform 200ms var(--ease-out);
}
.nav-item-dropdown:hover .nav-comprar-chevron,
.nav-item-dropdown.is-open .nav-comprar-chevron,
.nav-item-dropdown:focus-within .nav-comprar-chevron { transform: rotate(180deg); }
.nav-item-dropdown.is-dismissed .nav-comprar-chevron { transform: none; }
.nav-dropdown-menu-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--s-4) var(--s-6);
  display: flex;
  align-items: center;
  gap: var(--s-5);
}
.nav-primary a.nav-dd-item {
  display: inline-flex;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  padding: 4px 0;
  border-radius: 0;
  transition: color 150ms;
}
.nav-primary a.nav-dd-item::after { display: none; }
.nav-primary a.nav-dd-item:hover { background: none; color: var(--accent); }
.nav-primary a.nav-dd-item + .nav-dd-item { border-left: 1px solid var(--line-strong); padding-left: var(--s-5); }

/* Mega-menú agrupado del dropdown "Comprar": "Autos usados" es un grupo con
   encabezado + subopciones apiladas (Autos en venta / Ofertas del día /
   Autos premium / Vendedores registrados), igual que el acordeón de mobile.
   Se alinea arriba y se anulan los separadores verticales de la variante
   horizontal para las subopciones. */
.nav-dropdown-menu-inner.nav-dd-grouped {
  align-items: flex-start;
  gap: var(--s-7);
}
.nav-dd-group {
  display: flex;
  flex-direction: column;
}
/* "Autos usados" como acordeón: encabezado clickeable (mismo look que los
   ítems del dropdown) con chevron; los ítems arrancan colapsados y se
   muestran al hacer clic, igual que en mobile. */
.nav-dd-group-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  transition: color 150ms;
}
.nav-dd-group-toggle:hover,
.nav-dd-group-toggle[aria-expanded="true"] { color: var(--accent); }
.nav-dd-chevron { transition: transform 220ms var(--ease-out); }
.nav-dd-group-toggle[aria-expanded="true"] .nav-dd-chevron { transform: rotate(180deg); }
.nav-dd-group-items {
  display: none;
  flex-direction: column;
  gap: 7px;
  margin-top: 8px;
}
.nav-dd-group-items.is-open { display: flex; }
.nav-primary a.nav-dd-item.nav-dd-sub { padding: 2px 0; }
.nav-dd-group .nav-dd-item + .nav-dd-item { border-left: none; padding-left: 0; }
.nav-bluebook {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1d4ed8 !important;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 20px;
  padding: 4px 12px !important;
  transition: background 200ms, color 200ms !important;
}
.nav-bluebook::before { content: '📘'; font-size: 12px; }
.nav-bluebook:hover { background: #dbeafe !important; color: #1e40af !important; }
.nav-bluebook::after { display: none !important; }

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}
/* Visibles en desktop; el @media ≤900px los ajusta en tamaño */
.header-actions .btn-ingresar { display: inline-flex; }
.header-actions .btn-registrar { display: inline-flex; }

.icon-btn {
  position: relative;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: background 200ms;
}
.icon-btn:hover { background: var(--paper-deep); }
.icon-btn svg { width: 20px; height: 20px; stroke: var(--ink); stroke-width: 1.6; fill: none; }

.icon-btn .badge {
  position: absolute;
  top: 4px; right: 4px;
  min-width: 18px; height: 18px;
  border-radius: 9px;
  background: var(--accent);
  color: var(--paper);
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font-mono);
  display: grid;
  place-items: center;
  padding: 0 5px;
  transform: scale(0);
  transition: transform 280ms var(--ease-expo);
}
.icon-btn .badge.is-visible { transform: scale(1); }

/* ============================================================================
   HERO
   ========================================================================= */
/* ── Hero full-width video banner ── */
.hero {
  position: relative;
  width: 100%;
  min-height: 580px;
  display: flex;
  align-items: center;
  overflow: hidden;
  margin-top: 0;
  /* Sin video: fondo sólido, un tono más oscuro que --bg-body */
  background: var(--paper-deep);
}

/* Foreground content */
.hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 100px var(--s-6) 72px;
}

.hero-headline {
  font-size: clamp(36px, 5.5vw, 72px);
  letter-spacing: -0.028em;
  color: #fff;
  max-width: 680px;
  line-height: 1.06;
  text-shadow: 0 2px 20px rgba(0,0,0,0.35);
}
.hero-headline .accent {
  color: var(--accent);
  font-weight: 800;
  font-style: normal;
}

.hero-sub {
  margin-top: var(--s-4);
  font-size: 17px;
  color: rgba(255,255,255,0.72);
  max-width: 440px;
  line-height: 1.5;
}

/* ── Search card ── */
.hero-search-card {
  margin-top: var(--s-6);
  background: rgba(255, 255, 255, 0.97);
  border-radius: var(--r-3);
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.25);
  max-width: 820px;
}

.hero-search-tabs {
  display: flex;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  background: rgba(0,0,0,0.03);
}
.hero-tab {
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 600;
  color: #6b7280;
  border: none;
  background: transparent;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 150ms, border-color 150ms;
  margin-bottom: -1px;
}
.hero-tab.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: transparent;
}
.hero-tab:hover:not(.is-active) {
  color: #374151;
}

.hero-search-filters {
  display: flex;
  align-items: stretch;
  padding: 0;
}

.hero-filter-group {
  flex: 1;
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.hero-filter-sep {
  width: 1px;
  background: rgba(0,0,0,0.08);
  align-self: stretch;
  flex-shrink: 0;
}

.hero-filter-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6b7280;
  font-family: var(--font-sans);
}

.hero-filter-select {
  border: none;
  outline: none;
  background: transparent;
  font-size: 15px;
  font-weight: 500;
  color: #111827;
  cursor: pointer;
  padding: 0;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0 center;
  padding-right: 18px;
}
.hero-filter-select:focus { outline: none; }

.hero-search-btn {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 0 28px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 150ms;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: -0.01em;
}
.hero-search-btn:hover { background: var(--accent-deep); }

/* Stat pill below the card */
.hero-stat-pill {
  margin-top: var(--s-5);
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--r-pill);
  padding: 8px 20px;
  backdrop-filter: blur(10px);
}
.hero-stat-pill .hero-stat-num {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.03em;
}
.hero-stat-pill .hero-stat-num span { color: var(--accent); }
.hero-stat-pill .hero-stat-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}

/* ── Hero responsive ── */
@media (max-width: 768px) {
  .hero { min-height: 520px; }
  .hero-content { padding: 90px var(--s-4) 56px; }
  .hero-search-filters { flex-direction: column; overflow: visible; }
  .hero-filter-sep { width: auto; height: 1px; margin: 0; }
  .hero-filter-group { padding: 14px 18px; }
  .hero-filter-group:first-child { border-radius: 0; }
  .hero-search-btn { width: 100%; justify-content: center; padding: 18px; border-radius: 0 0 20px 20px; }
  .hero-ac-dropdown { left: 0; right: 0; }
}
@media (max-width: 480px) {
  .hero { min-height: 480px; }
  .hero-content { padding: 80px var(--s-4) 48px; }
  .hero-search-card { max-width: 100%; }
}

/* Hero stat — legacy, keep for possible reuse */
.hero-stat { text-align: right; position: relative; }
.hero-stat-num {
  font-family: var(--font-display);
  font-size: clamp(72px, 11vw, 160px);
  line-height: 0.9;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--ink);
  display: block;
}
.hero-stat-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--metal);
  margin-top: var(--s-3);
}
.hero-stat::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -40px;
  width: 1px; height: 60%;
  background: var(--line);
  transform: translateY(-50%);
}

/* Search bar */
.search-bar {
  margin-top: var(--s-7);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-3);
  padding: 8px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  box-shadow: var(--shadow-md);
  position: relative;
  transition: border-color 200ms, box-shadow 200ms;
}
.search-bar:focus-within {
  border-color: var(--ink);
  box-shadow: var(--shadow-lg);
}
.search-bar input {
  background: transparent;
  border: none;
  outline: none;
  padding: 14px 18px;
  font-size: 16px;
  font-family: var(--font-sans);
  letter-spacing: -0.01em;
}
.search-bar input::placeholder { color: var(--metal); }

.btn-primary {
  padding: 14px 28px;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r-2);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 200ms, transform 200ms var(--ease-out);
}
.btn-primary:hover { background: var(--accent); }
.btn-primary:active { transform: scale(0.98); }

.btn-primary svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; }

/* Search shortcuts */
.search-shortcuts {
  margin-top: var(--s-4);
  display: flex;
  gap: var(--s-2);
  align-items: center;
  flex-wrap: wrap;
}
.search-shortcuts .label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--metal);
  margin-right: 4px;
}
.shortcut {
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 13px;
  color: var(--ink-soft);
  transition: all 200ms;
  background: transparent;
}
.shortcut:hover {
  border-color: var(--ink);
  color: var(--ink);
  transform: translateY(-1px);
}

/* Trust band */
.trust-band {
  margin-top: var(--s-7);
  padding: var(--s-5) var(--s-6);
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r-3);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-5);
}
.trust-item {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
}
.trust-item-num {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1;
  color: var(--accent);
  font-weight: 300;
}
.trust-item-text {
  font-size: 12px;
  letter-spacing: 0.04em;
  line-height: 1.35;
  color: var(--paper);
  opacity: 0.9;
}

/* ============================================================================
   LISTADO LAYOUT
   ========================================================================= */
.listado-section {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--s-7) var(--s-6) var(--s-9);
}

.listado-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--s-5);
  margin-bottom: var(--s-7);
  padding-bottom: var(--s-6);
  border-bottom: 1px solid var(--line);
}
.listado-title {
  font-size: clamp(36px, 5vw, 64px);
  letter-spacing: -0.03em;
}
.listado-title em {
  font-style: italic;
  color: var(--accent);
}
.listado-meta {
  font-size: 14px;
  color: var(--ink-soft);
  margin-top: var(--s-3);
  max-width: 440px;
}
.listado-meta strong {
  font-family: var(--font-mono);
  color: var(--ink);
  font-weight: 500;
}

/* ── Nota de referencia bajo el encabezado de los listados ──
   Aclara el precio marcado con * y resume el catálogo (total, cuántos con
   financiamiento —el logo BAC de las tarjetas— y ofertas del día). */
.results-note {
  grid-column: 1 / -1;   /* por si queda dentro de un grid de tarjetas */
  margin: 0 0 var(--s-5);
  padding: var(--s-3) var(--s-4);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  text-align: center;
}
.results-note:empty { display: none; }
.results-note-ref {
  font-size: 12px;
  color: var(--ink-soft);
  margin: 0;
}
.results-note-star {
  color: var(--accent);
  font-weight: 700;
}
.results-note-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px var(--s-5);
  margin: 6px 0 0;
  font-size: 12.5px;
  color: var(--ink-soft);
}
/* Cada dato salta de línea completo (con su logo), nunca partido. */
.results-note-stats > span { white-space: nowrap; }
.results-note-stats strong {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--ink);
}
/* Isotipo BAC antes del conteo de autos con financiamiento — escala con la
   tipografía de la línea (em), así se mantiene proporcional si cambia. */
.results-note-bac {
  display: inline-block;   /* el reset global pone img en block */
  height: 1.15em;
  width: auto;
  vertical-align: -0.22em;
  margin-right: 5px;
}
.results-note-flag {
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent);
}

.view-controls {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

.sort-select {
  padding: 10px 36px 10px 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  font-size: 13px;
  cursor: pointer;
  transition: border-color 200ms;
  color: var(--ink);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9' fill='none' stroke='%236E7898' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
}
.sort-select:hover { border-color: var(--line-strong); }

.currency-select {
  min-width: 110px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Dropdown a medida (botón + panel), reemplaza el <select> nativo: el botón
   siempre dice "Moneda" en vez de repetir la opción seleccionada. */
.currency-dd { position: relative; }
.currency-dd-panel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 140px;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  z-index: 40;
}
.currency-dd.is-open .currency-dd-panel { display: block; }
.currency-dd-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border-radius: var(--r-1);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
}
.currency-dd-option:hover { background: var(--paper-warm); }
.currency-dd-option.is-active { color: var(--accent); font-weight: 700; }

.compare-mode-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--paper);
  color: var(--ink-2);
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.compare-mode-btn:hover { border-color: var(--accent); color: var(--accent); }
.compare-mode-btn.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
/* Mismo botón reutilizado en la cabecera de "Mis favoritos" (#favoritos-compare-toggle) */
.dash-profile-hd .compare-mode-btn { flex-shrink: 0; align-self: center; cursor: pointer; }

/* ── USD mode: small secondary symbols ── */
.card-price-crc .currency-lbl {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--metal);
  font-weight: 400;
  letter-spacing: 0.08em;
  margin-left: 2px;
}
.card-price-usd .crc-sym {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--metal-soft);
  font-weight: 400;
  margin-right: 1px;
}

.view-toggle {
  display: flex;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  overflow: hidden;
}
.view-toggle button {
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  transition: background 200ms;
}
.view-toggle button.is-active { background: var(--ink); color: var(--paper); }
.view-toggle button svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.5; fill: none; }

/* Layout grid: filters + results */
.listado-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--s-7);
  align-items: start;
}

/* ----- Filters Sidebar -----
   Sin scroll propio: el panel fluye con la página. Se quitó el
   position:sticky con max-height/overflow porque, al ser más alto que el
   viewport, dejaba contenido inalcanzable — ahora el scroll lo hace
   siempre la página completa. */
.filters {
  align-self: start;
  padding-right: var(--s-3);
}

.filter-group {
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--line);
}
.filter-group:first-child { padding-top: 0; }

.filter-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--metal);
  margin-bottom: var(--s-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.filter-title .count {
  color: var(--accent);
  font-weight: 600;
}

.filter-options {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.filter-option {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  cursor: pointer;
  font-size: 14px;
  color: var(--ink-soft);
  transition: color 200ms;
  user-select: none;
}
.filter-option:hover { color: var(--ink); }
.filter-option .checkbox {
  width: 18px; height: 18px;
  border: 1.5px solid var(--line-strong);
  border-radius: 4px;
  display: grid;
  place-items: center;
  transition: all 200ms;
  flex-shrink: 0;
}
.filter-option .checkbox::after {
  content: '';
  width: 10px; height: 10px;
  background: var(--accent);
  border-radius: 2px;
  transform: scale(0);
  transition: transform 200ms var(--ease-expo);
}
.filter-option input { display: none; }
.filter-option input:checked + .checkbox {
  border-color: var(--accent);
}
.filter-option input:checked + .checkbox::after {
  transform: scale(1);
}
.filter-option input[type="radio"] + .checkbox,
.filter-option input[type="radio"] + .checkbox::after {
  border-radius: 50%;
}
.filter-option .label-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--metal);
}

/* Range slider */
.range-group {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.range-display {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 13px;
}
.range-display .min { color: var(--metal); }
.range-display .max { color: var(--ink); font-weight: 500; }

.range-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: var(--line);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px;
  background: var(--ink);
  border-radius: 50%;
  cursor: grab;
  border: 3px solid var(--paper-deep);
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
  transition: transform 150ms var(--ease-out);
}
.range-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.range-slider::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.25); }
.range-slider::-moz-range-thumb {
  width: 18px; height: 18px;
  background: var(--ink);
  border-radius: 50%;
  border: 3px solid var(--paper-deep);
  cursor: grab;
}

/* Applied filter chips */
.applied-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
  min-height: 30px;
  align-items: center;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 6px 6px 12px;
  background: var(--paper-deep);
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 500;
  animation: chipIn 280ms var(--ease-expo);
}
.chip button {
  width: 18px; height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--paper);
  font-size: 11px;
  transition: transform 200ms;
}
.chip button:hover { transform: rotate(90deg); }
@keyframes chipIn {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}
.chip-clear {
  font-size: 12px;
  color: var(--accent);
  text-decoration: underline;
  margin-left: var(--s-3);
}

/* ----- Results Grid ----- */
.results-grid {
  display: grid;
  /* minmax(0, 1fr), no "1fr" a secas: un 1fr puro usa "auto" como mínimo
     implícito, así que el contenido más ancho de una sola card (texto largo,
     etc.) puede forzar esa columna a crecer y descuadrar toda la grilla.
     minmax(0, 1fr) fija el piso en 0 y deja que las 6 columnas repartan el
     espacio en partes iguales sin importar cuánto contenido tenga cada card. */
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--s-3);
}
@media (max-width: 1400px) {
  .results-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .results-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ============================================================================
   AD SLOT — espacios publicitarios de ejemplo (Google Ads) intercalados
   en el listado de resultados. Placeholder visual, sin script real de ads.
   ========================================================================== */
.ad-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 110px;
  background: repeating-linear-gradient(45deg, var(--paper) 0 10px, var(--paper-warm) 10px 20px);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-3);
  text-align: center;
}
.ad-slot-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
}
.ad-slot-format {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--metal);
}
.ad-slot--leaderboard { grid-column: span 3; }
.ad-slot--square { grid-column: span 1; aspect-ratio: 1 / 1; min-height: 0; }

@media (max-width: 1400px) {
  .ad-slot--leaderboard { grid-column: span 2; }
}
@media (max-width: 900px) {
  .ad-slot--leaderboard { grid-column: 1 / -1; }
  .ad-slot--square { grid-column: span 1; aspect-ratio: 4 / 3; }
}

/* Vista lista: el grid solo tiene 1 columna explícita — pedirle "span 3" al
   banner (pensado para la grilla de varias columnas) obligaría al navegador
   a crear columnas implícitas y rompería el layout de toda la lista. Acá
   basta con 1 columna; el banner ya ocupa el ancho completo de forma
   natural y el cuadrado se limita a un tamaño fijo y se centra para no
   estirarse a lo ancho de la fila. */
.results-grid.view-list .ad-slot--leaderboard,
.results-grid.view-list .ad-slot--square {
  grid-column: 1;
}
.results-grid.view-list .ad-slot--square {
  max-width: 300px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}

.no-results {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--s-9) var(--s-5);
  color: var(--metal);
}
.no-results h3 {
  font-family: var(--font-display);
  font-size: 32px;
  color: var(--ink);
  margin-bottom: var(--s-3);
}

/* ============================================================================
   VEHICLE CARD — PIEZA CRÍTICA
   ========================================================================= */
.card {
  background: var(--paper);
  border-radius: var(--r-3);
  overflow: hidden;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  transition: transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out), border-color 320ms;
  position: relative;
  cursor: pointer;
  view-transition-name: none;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--line-strong);
}
.card.is-featured {
  border: 2px solid #f59e0b;
  box-shadow: 0 4px 18px rgba(245, 158, 11, 0.18);
}
.card.is-featured:hover {
  box-shadow: 0 6px 24px rgba(245, 158, 11, 0.28);
  border-color: #f59e0b;
}

.card.is-registered {
  border-top: 3px solid var(--finance);
}

.card-photo-wrap {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--paper-deep);
}

.card-photo {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease-out), opacity 400ms;
}
.card:hover .card-photo {
  transform: scale(1.04);
}

.card-photos-stack {
  position: absolute;
  inset: 0;
}
.card-photos-stack img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 350ms;
}
.card-photos-stack img.is-current { opacity: 1; }

.card-photos-dots {
  position: absolute;
  bottom: 12px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 200ms;
}
.card:hover .card-photos-dots { opacity: 1; }
.card-photos-dots .dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(245, 242, 236, 0.5);
  transition: all 200ms;
}
.card-photos-dots .dot.is-current {
  background: var(--paper);
  width: 16px;
  border-radius: 3px;
}

.card-badge-verified {
  position: absolute;
  top: 12px; left: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--verified);
  color: var(--paper);
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  z-index: 2;
}
.card-badge-verified::before {
  content: '✓';
  font-weight: 700;
  font-size: 10px;
}

.card-badge-registered {
  position: absolute;
  top: 0; left: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px 6px 10px;
  background: var(--finance);
  color: var(--paper);
  border-radius: 0 0 var(--r-2) 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  z-index: 2;
}
.card-badge-registered::before {
  content: '✓';
  font-weight: 700;
  font-size: 10px;
}

/* Badge "Destacado" — misma forma/posición que el de registrado, en dorado
   (mismo ámbar del borde .card.is-featured) y con una estrella a la izquierda. */
.card-badge-featured {
  position: absolute;
  top: 0; left: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px 6px 10px;
  background: #f59e0b;
  color: #241900;
  border-radius: 0 0 var(--r-2) 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  z-index: 2;
}
.card-badge-featured::before {
  content: '★';
  font-size: 11px;
  line-height: 1;
}
.card-select-mark {
  display: none;
  position: absolute;
  top: 10px; right: 52px;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 2px solid var(--paper);
  background: rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(6px);
  align-items: center;
  justify-content: center;
  color: transparent;
  z-index: 2;
  transition: background 150ms var(--ease-out), border-color 150ms var(--ease-out), color 150ms var(--ease-out);
}
.results-grid.compare-mode .card-select-mark { display: flex; }
.results-grid.compare-mode .card { cursor: pointer; }
.results-grid.compare-mode .card:hover:not(.is-cmp-selected) { box-shadow: 0 0 0 2px var(--accent); }
.card.is-cmp-selected .card-select-mark {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper);
}
.card.is-cmp-selected {
  transform: scale(1.035);
  box-shadow: 0 0 0 3px var(--accent), 0 10px 28px rgba(0, 0, 0, 0.3);
  border-color: var(--accent);
  z-index: 3;
}
.card.is-cmp-selected:hover { transform: translateY(-4px) scale(1.035); }
/* En la card horizontal (favoritos / vista listado) el bullet se ancla a la
   esquina superior derecha de TODA la card — a su derecha está la columna del
   toggle de alertas, no la foto, así que el offset de 52px de la card grilla
   no aplica. Mismo anclaje que en mobile (ver bloque max-width: 900px). */
@media (min-width: 901px) {
  .results-grid.view-list .card-select-mark { top: var(--s-3); right: var(--s-3); }
}

.card-fav {
  position: absolute;
  top: 10px; right: 10px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--glass-card);
  backdrop-filter: blur(10px);
  display: grid;
  place-items: center;
  z-index: 2;
  transition: background 200ms;
}
.card-fav:hover { background: var(--paper); }
.card-fav svg {
  width: 18px; height: 18px;
  stroke: var(--ink);
  stroke-width: 1.8;
  fill: none;
  transition: all 250ms var(--ease-expo);
}
.card-fav.is-fav svg {
  fill: var(--accent);
  stroke: var(--accent);
  animation: favBeat 600ms var(--ease-expo);
}
@keyframes favBeat {
  0% { transform: scale(1); }
  30% { transform: scale(0.85); }
  50% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

/* Heart particles on fav */
.card-fav .particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.card-fav .particle {
  position: absolute;
  top: 50%; left: 50%;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
}
.card-fav.burst .particle {
  animation: burst 700ms ease-out forwards;
}
.card-fav.burst .particle:nth-child(1) { --tx: 18px; --ty: -22px; animation-delay: 0ms; }
.card-fav.burst .particle:nth-child(2) { --tx: -22px; --ty: -10px; animation-delay: 30ms; }
.card-fav.burst .particle:nth-child(3) { --tx: 8px; --ty: 24px; animation-delay: 60ms; }
.card-fav.burst .particle:nth-child(4) { --tx: -10px; --ty: 18px; animation-delay: 80ms; }
.card-fav.burst .particle:nth-child(5) { --tx: 24px; --ty: 6px; animation-delay: 100ms; }

@keyframes burst {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
  60% { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0); opacity: 0; }
}

.card-body {
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

/* Toggle de alertas en la tarjeta de favoritos — barra al pie de la card,
   misma campana y estados que el botón "Alertas" de la ficha. Activo = accent
   (recibiendo alertas), inactivo = apagado. */
.card-alert-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  width: 100%;
  padding: var(--s-3) var(--s-4);
  border: none;
  border-top: 1px solid var(--line);
  border-radius: 0 0 var(--r-3) var(--r-3);
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 160ms var(--ease-out), color 160ms var(--ease-out);
}
.card-alert-toggle svg { opacity: 0.8; flex-shrink: 0; }
.card-alert-toggle:hover { background: var(--paper-warm); color: var(--ink); }
.card-alert-toggle.is-active { color: var(--accent); }
.card-alert-toggle.is-active svg { opacity: 1; stroke: var(--accent); fill: color-mix(in srgb, var(--accent) 18%, transparent); }
.card-alert-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Favoritos usa la card horizontal (results-grid.view-list): ahí la card es un
   flex-row [foto | cuerpo | ...]. El toggle deja de ser una barra al pie y pasa
   a ser una columna de acción a la derecha, separada por un divisor — así queda
   alineado con el resto del layout.
   NO estira a lo alto (align-self: center): la esquina superior derecha de la
   card queda libre para el bullet de selección del comparador
   (.card-select-mark), que antes se dibujaba encima de este botón. */
.results-grid.view-list .card-alert-toggle {
  position: relative;
  flex-direction: column;
  gap: var(--s-2);
  width: auto;
  align-self: center;
  justify-content: center;
  border-top: none;
  border-left: none;
  border-radius: 0;
  flex-shrink: 0;
}
/* El divisor sí ocupa todo el alto (la card recorta con overflow: hidden), así
   la columna de acción se sigue leyendo como tal aunque el botón sea más bajo. */
.results-grid.view-list .card-alert-toggle::before {
  content: '';
  position: absolute;
  left: 0;
  top: -100vh;
  bottom: -100vh;
  width: 1px;
  background: var(--line);
  pointer-events: none;
}
@media (min-width: 901px) {
  .results-grid.view-list .card-alert-toggle {
    min-width: 156px;
    /* Alto acotado a la escala de espaciado: centrado en una card de 196px
       arranca en y≈50px, muy por debajo del bullet (termina en y=38px). */
    height: var(--s-9);
    padding: var(--s-3) var(--s-5);
  }
  .results-grid.view-list .card-alert-toggle svg { width: 18px; height: 18px; }
}
/* En mobile la card horizontal mide 128px de alto: el toggle se vuelve un rail
   angosto solo-ícono para no robarle ancho al cuerpo. */
@media (max-width: 900px) {
  .results-grid.view-list .card-alert-toggle {
    min-width: 0;
    /* 48px centrados en 128px → arranca en y=40px, libre del bullet (y=34px). */
    height: var(--s-7);
    padding: 0 var(--s-4);
  }
  .results-grid.view-list .card-alert-toggle .card-alert-toggle-label { display: none; }
  .results-grid.view-list .card-alert-toggle svg { width: 19px; height: 19px; }
}

/* La card de favoritos muestra el detalle completo (specs + estilo/color/placa/
   ubicación + vendedor): en desktop no cabe en los 180px fijos de la card lista
   y el contenido quedaba recortado y apretado. Se le da alto según contenido
   (con un mínimo) y una separación de filas acorde al foundation. Scopeado a
   #favoritos-grid para no alterar la lista de resultados. */
@media (min-width: 901px) {
  #favoritos-grid .card { height: auto; min-height: 196px; }
  #favoritos-grid .card-body { row-gap: 6px; align-content: center; }
}

/* ============================================================================
   ANUNCIO VENCIDO EN FAVORITOS (.card.is-expired-listing)
   El auto sigue en la lista guardada pero ya no está publicado: un velo cubre
   la card entera y deja una sola acción, quitarlo de favoritos.
   ========================================================================= */
.card.is-expired-listing { cursor: default; }
.card.is-expired-listing:hover {
  transform: none;
  box-shadow: var(--shadow-md);
  border-color: var(--line);
}
/* La foto en gris refuerza el "ya no disponible" bajo el velo translúcido. */
.card.is-expired-listing .card-photos-stack { filter: grayscale(1); }
/* Un anuncio vencido no se puede comparar: el velo bloquea el click, así que
   el bullet de selección tampoco debe aparecer en modo comparación. */
.card.is-expired-listing .card-select-mark { display: none; }

.card-expired-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  padding: var(--s-4);
  text-align: center;
  background: rgba(21, 24, 36, 0.78);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.card-expired-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  max-width: 320px;
}
.card-expired-inner > svg { color: var(--metal-soft); opacity: 0.9; }
.card-expired-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.card-expired-remove {
  padding: 0;
  border: none;
  background: none;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color 160ms var(--ease-out);
}
.card-expired-remove:hover { color: var(--accent-deep); }
.card-expired-remove:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-1);
}
/* En la card horizontal de mobile (128px de alto) el ícono no cabe. */
@media (max-width: 900px) {
  .card-expired-overlay { padding: var(--s-3); }
  .card-expired-inner { gap: var(--s-1); }
  .card-expired-inner > svg { display: none; }
  .card-expired-title { font-size: 13px; }
  .card-expired-remove { font-size: 12px; }
}

/* ============================================================================
   COMPARTIR FAVORITOS — panel al pie de la vista "Mis favoritos" (#fav-share).
   Exclusivo de esa vista: no aparece en resultados ni en el home. Reutiliza los
   controles del asistente de venta (.field-group / .sell-radio-group) para que
   el formulario se lea igual que el resto de la app.
   ========================================================================= */
.fav-share {
  margin-top: var(--s-6);
  padding: var(--s-6);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-md);
}
.fav-share-hd {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.fav-share-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: var(--r-2);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
}
.fav-share-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.fav-share-intro {
  margin: 0 0 var(--s-5);
  max-width: 68ch;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.fav-share-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  max-width: 620px;
}
.fav-share-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
}
/* Especificidad extra: .btn-auth-primary (width:100%) se declara más abajo. */
.fav-share .fav-share-submit {
  width: auto;
  align-self: flex-start;
  padding: 12px var(--s-6);
}
.fav-share-scope-error { margin-top: calc(var(--s-2) * -1); }
.fav-share-note {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  margin: var(--s-5) 0 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  max-width: 68ch;
  font-size: 12px;
  line-height: 1.5;
  color: var(--metal-soft);
}
.fav-share-note svg { flex-shrink: 0; margin-top: 1px; opacity: 0.8; }

@media (max-width: 640px) {
  .fav-share { padding: var(--s-4); margin-top: var(--s-5); }
  .fav-share-options { grid-template-columns: 1fr; }
  .fav-share .fav-share-submit { width: 100%; align-self: stretch; }
}

/* Wraps brand + model; column by default (grid cards), switches to row
   only in the horizontal list-view card on mobile (see media query). */
.card-title-row {
  display: flex;
  flex-direction: column;
}

/* ── Card identity row: brand label ── */
.card-identity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

.card-seller-verified {
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--verified);
  margin-top: 3px;
}

/* Financiamiento BAC — píldora con el logo del banco (sin texto: el logo
   habla por sí solo); badge de ejemplo, no se muestra en todos los autos. */
.card-finance-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  justify-self: start;
  width: fit-content;
  margin-top: 5px;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.card-finance-badge .bac-logo {
  height: 13px;
  width: auto;
  display: block;
}
.cbadge-bac-mono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #0f2a59;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0;
  padding: 1px 5px;
  border-radius: var(--r-pill);
  text-transform: uppercase;
}

.card-model {
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0;
  line-height: 1.2;
  font-weight: 500;
  color: var(--ink-soft);
}

/* ── Price block: main price + cuota ── */
.card-price-block {
  margin-top: var(--s-1);
}
.card-price-main {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}
.card-price-main .currency {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--metal);
  font-weight: 400;
  margin-right: 1px;
}
.card-price-main .price-alt {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--metal);
  margin-left: 4px;
}
/* Marca del precio aproximado (el convertido) — la nota del listado la
   explica. Ver .results-note / renderResultsNote(). */
.price-approx-star {
  color: var(--accent);
  margin-left: 1px;
}
.card-price {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}
.card-price .currency {
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--metal);
  margin-right: 2px;
  font-weight: 400;
}
.card-cuota {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--metal);
  margin-top: 3px;
  letter-spacing: 0;
}
.card-cuota strong {
  color: var(--ink-soft);
  font-weight: 500;
}

.card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: 12px;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  margin-top: var(--s-1);
}
.card-meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
}
.card-meta-item::before {
  content: '';
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--metal);
}
.card-meta-item:first-child::before { display: none; }


/* Card exit/enter on filter */
.card.is-leaving {
  animation: cardLeave 350ms var(--ease-expo) forwards;
}
@keyframes cardLeave {
  to {
    opacity: 0;
    transform: scale(0.92) translateY(-8px);
  }
}
.card.is-entering {
  animation: cardEnter 450ms var(--ease-expo) backwards;
}
@keyframes cardEnter {
  from { opacity: 0; transform: scale(0.92) translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* ============================================================================
   FINANCIAL MODULE INLINE
   ========================================================================= */
.fin-module {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, #1a1e2e 0%, #0f1118 100%);
  color: var(--ink);
  border-radius: var(--r-4);
  padding: var(--s-7);
  margin: var(--s-3) 0;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--s-7);
  align-items: center;
  position: relative;
  overflow: hidden;
}
.fin-module::before {
  content: '';
  position: absolute;
  top: -100px; right: -100px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(200, 65, 43, 0.18) 0%, transparent 70%);
  pointer-events: none;
}

.fin-eyebrow {
  color: var(--accent);
  margin-bottom: var(--s-3);
}
.fin-headline {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.026em;
  margin-bottom: var(--s-4);
  max-width: 420px;
}
.fin-headline em {
  font-style: normal;
  font-weight: 800;
  color: var(--accent);
}
.fin-sub {
  font-size: 14px;
  opacity: 0.90;
  max-width: 380px;
  line-height: 1.5;
}

.fin-controls {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  position: relative;
  z-index: 2;
}

.fin-control label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(237, 240, 247, 0.90);
  margin-bottom: var(--s-2);
}
.fin-control .value {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  margin-bottom: var(--s-3);
}

.fin-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  background: rgba(237, 240, 247, 0.15);
  border-radius: 2px;
  outline: none;
}
.fin-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px; height: 22px;
  background: var(--accent);
  border-radius: 50%;
  cursor: grab;
  border: 3px solid var(--ink);
  box-shadow: 0 0 0 0 rgba(200, 65, 43, 0.4);
  transition: box-shadow 200ms;
}
.fin-slider::-webkit-slider-thumb:hover {
  box-shadow: 0 0 0 6px rgba(200, 65, 43, 0.2);
}

.fin-result {
  margin-top: var(--s-5);
  padding: var(--s-5);
  background: rgba(237, 240, 247, 0.05);
  border-radius: var(--r-3);
  border: 1px solid rgba(237, 240, 247, 0.1);
}
.fin-result-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(237, 240, 247, 0.90);
  margin-bottom: var(--s-2);
}

/* Odometer for financial result */
.odometer {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.025em;
  display: inline-flex;
  align-items: baseline;
}
.odometer .currency {
  font-family: var(--font-mono);
  font-size: 24px;
  color: rgba(237, 240, 247, 0.5);
  margin-right: 6px;
  font-weight: 400;
}
.odometer-digits {
  display: inline-flex;
  overflow: hidden;
  height: 1em;
  align-items: baseline;
  gap: 0.16em;
  letter-spacing: normal;
}
.odometer-digit {
  display: inline-block;
  position: relative;
  height: 1em;
  width: 0.58em;
  text-align: center;
  overflow: hidden;
  letter-spacing: normal;
}
.odometer-digit.sep {
  width: 0.25em;
  color: rgba(237, 240, 247, 0.5);
}
.odometer-digit-track {
  display: flex;
  flex-direction: column;
  transition: transform 700ms var(--ease-expo);
}
.odometer-digit-track span {
  height: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.fin-cuota-label {
  margin-top: var(--s-3);
  font-size: 13px;
  opacity: 0.90;
}
.fin-cuota-label strong {
  color: var(--accent);
  font-weight: 500;
}

.fin-cta {
  margin-top: var(--s-5);
  padding: 12px 22px;
  background: var(--accent);
  color: var(--paper);
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 200ms, transform 200ms var(--ease-out);
}
.fin-cta:hover {
  background: var(--accent-deep);
  transform: translateY(-1px);
}
.fin-cta::after {
  content: '→';
  transition: transform 200ms;
}
.fin-cta:hover::after { transform: translateX(4px); }

/* ── Results section headers ── */
.results-section-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  padding: var(--s-5) 0 var(--s-3);
  border-bottom: 1px solid var(--line);
  margin-top: var(--s-3);
}
.results-section-head:first-child {
  padding-top: 0;
  margin-top: 0;
}

.results-section-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--ink);
  white-space: nowrap;
}
.section-title-check {
  display: inline-flex;
  align-items: center;
  color: var(--verified);
  margin-right: 7px;
  transform: translateY(2px);
}

.results-section-sub {
  font-size: 13px;
  color: var(--ink-soft);
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.results-section-action {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
  transition: transform 200ms var(--ease-out);
}
.results-section-action:hover {
  color: var(--accent-deep);
  transform: translateX(2px);
}

/* ── Compact financial module (home inline) ── */
.fin-module--compact {
  grid-template-columns: 1fr;
  padding: var(--s-5) var(--s-6);
  gap: var(--s-4);
}

.fin-c-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.fin-c-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.1;
  margin: 0;
}

.fin-c-row {
  display: flex;
  gap: var(--s-4);
  align-items: flex-start;
  flex-wrap: wrap;
}

.fin-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 140px;
}

.fin-field-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(237, 240, 247, 0.6);
}

.fin-input-wrap {
  display: flex;
  align-items: center;
  background: rgba(237, 240, 247, 0.07);
  border: 1px solid rgba(237, 240, 247, 0.14);
  border-radius: var(--r-2);
  padding: 10px 12px;
  gap: 4px;
  transition: border-color 200ms;
}
.fin-input-wrap:focus-within {
  border-color: var(--accent);
  background: rgba(237, 240, 247, 0.10);
}

.fin-input-pfx {
  font-family: var(--font-mono);
  font-size: 13px;
  color: rgba(237, 240, 247, 0.45);
  flex-shrink: 0;
}

.fin-price-input {
  background: none;
  border: none;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  width: 100%;
  min-width: 0;
  outline: none;
}

.fin-price-input::placeholder { color: rgba(237, 240, 247, 0.25); }

.fin-prima-amount {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(237, 240, 247, 0.55);
}

.fin-select {
  background: rgba(237, 240, 247, 0.07) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(237,240,247,0.5)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center;
  border: 1px solid rgba(237, 240, 247, 0.14);
  border-radius: var(--r-2);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 10px 32px 10px 12px;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color 200ms;
}
.fin-select:focus {
  outline: none;
  border-color: var(--accent);
}
.fin-select option { background: #1a1e2e; color: var(--ink); }

.fin-field--result {
  flex: 2;
  min-width: 220px;
  padding-left: var(--s-5);
  border-left: 1px solid rgba(237, 240, 247, 0.1);
}

/* ── Calculadora del home: dos zonas (entrada → resultado) ───────────────── */
.fin-module--calc { gap: var(--s-5); }

.fin-calc {
  display: flex;
  align-items: stretch;
  gap: var(--s-5);
}

.fin-calc-panel {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/* Zona de entrada: misma caja que la zona de resultado (padding, borde y
   separación internos idénticos) para que la etiqueta y el campo de cada lado
   arranquen en la misma línea. Antes iba sin recuadro y centrada en vertical,
   que era justo lo que desalineaba "cuota" y "valor del auto". */
.fin-calc-panel--input {
  flex: 1 1 0;
  min-width: 240px;
  gap: var(--s-4);
  padding: var(--s-5);
  border-radius: var(--r-3);
  background: rgba(237, 240, 247, 0.04);
  border: 1px solid rgba(237, 240, 247, 0.10);
}

/* Las dos etiquetas comparten métrica: misma altura de primera línea en ambos
   paneles. El margen se anula porque la separación ya la da el gap del panel. */
.fin-calc .fin-field-label,
.fin-calc .fin-result-label {
  font-size: 11px;
  letter-spacing: 0.12em;
  line-height: 1.4;
  margin: 0;
}

/* Y los dos campos comparten alto: el interlineado fijo neutraliza la
   diferencia de tamaño de fuente entre el campo de cuota y el hero. */
.fin-calc .fin-price-input,
.fin-calc .fin-input-pfx { line-height: 1.1; }
.fin-calc .fin-input-wrap--lg,
.fin-calc .fin-input-wrap--hero {
  min-height: 64px;
  align-items: center;
}

/* Panel de resultado: superficie destacada con acento de marca. */
.fin-calc-panel--result {
  flex: 1 1 0;
  min-width: 260px;
  gap: var(--s-4);
  padding: var(--s-5);
  border-radius: var(--r-3);
  background: rgba(232, 97, 78, 0.08);
  border: 1px solid rgba(232, 97, 78, 0.24);
}

.fin-result-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}

/* Conector visual entre las dos zonas. */
.fin-calc-connector {
  flex: 0 0 auto;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(237, 240, 247, 0.4);
}

/* Campo de entrada grande (cuota mensual). */
.fin-input-wrap--lg { padding: 13px 14px; }
.fin-price-input--lg {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.fin-input-wrap--lg .fin-input-pfx { font-size: 18px; }

/* Meta: parámetros fijos (plazo · prima · tasa) como contexto secundario. */
.fin-calc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  margin-top: var(--s-1);
}
.fin-meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fin-meta-k {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(237, 240, 247, 0.45);
}
.fin-meta-v {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}

/* Resultado hero: el precio del auto que puede comprar. */
.fin-input-wrap--hero {
  padding: 12px 14px;
  background: rgba(237, 240, 247, 0.06);
  border-color: rgba(232, 97, 78, 0.28);
}
.fin-input-wrap--hero:focus-within { border-color: var(--accent); }

.fin-input-pfx--hero {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: rgba(237, 240, 247, 0.5);
}

.fin-price-input--hero {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Equivalente en colones bajo el precio en dólares: la calculadora cotiza en
   USD, pero el catálogo lista en ₡ — esta línea permite comparar. */
.fin-crc-equiv {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(237, 240, 247, 0.55);
  margin: calc(-1 * var(--s-1)) 0 var(--s-3);
}

.fin-calc-cta {
  width: 100%;
  justify-content: center;
}

/* Apilado vertical en anchos reducidos. */
@media (max-width: 760px) {
  .fin-calc { flex-direction: column; }
  .fin-calc-connector { transform: rotate(90deg); margin: calc(-1 * var(--s-2)) 0; }
  .fin-calc-panel--input, .fin-calc-panel--result { min-width: 0; }
}

.fin-field--plazo {
  flex: 0 0 108px;
  min-width: 92px;
}

.fin-field--cta {
  flex: 0 0 auto;
  align-items: flex-start;
  margin-right: var(--s-5);
}
.fin-field--cta .fin-field-label {
  visibility: hidden;
}

.odometer--sm { font-size: 46px; }
.odometer--sm .currency { font-size: 22px; }

.fin-cta--sm {
  margin-top: 0;
  padding: var(--s-3) var(--s-6);
  color: #fff;
  white-space: nowrap;
}

.fin-c-note {
  font-size: 11px;
  opacity: 0.5;
  margin: 0;
}
.fin-c-note strong {
  color: var(--accent);
  font-weight: 500;
}

.fin-c-banks {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--s-2);
}
.fin-c-banks-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-soft);
}
.fin-c-bac-logo {
  height: 16px;
  width: auto;
  display: block;
}

.fin-c-disclaimer {
  font-size: 10px;
  line-height: 1.5;
  color: var(--metal);
  opacity: 0.75;
  margin: var(--s-2) 0 0;
  max-width: 100%;
}

/* ============================================================================
   FICHA — VEHICLE DETAIL VIEW
   ========================================================================= */
.ficha-section {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 0 var(--s-9);
}

/* ESTE ES el ::before que producía la "doble flecha" del viejo header de la
   ficha (flecha de CSS + <svg> inline en el markup) y por el que ese header se
   terminó quitando. La regla vigente de .ficha-back está más abajo, en el
   bloque "FICHA REDESIGN", y dibuja la flecha SOLO con el svg del markup.
   No reintroducir un ::before con contenido aquí. */

.ficha-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--s-7);
  align-items: start;
}

/* Gallery */
.ficha-gallery {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--s-3);
}

.gallery-thumbs {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.gallery-thumb {
  width: 80px;
  aspect-ratio: 4/3;
  border-radius: var(--r-2);
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  opacity: 0.6;
  transition: all 250ms;
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumb:hover { opacity: 1; }
.gallery-thumb.is-active {
  border-color: var(--ink);
  opacity: 1;
}

.gallery-main {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--r-3);
  overflow: hidden;
  background: var(--paper-deep);
}
.gallery-main img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: opacity 400ms;
}

.gallery-counter {
  position: absolute;
  bottom: 16px; right: 16px;
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(10px);
  color: var(--ink);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
}

/* Panel lateral */
.ficha-panel {
  position: static;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.ficha-brand {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--metal);
}
.ficha-model {
  font-family: var(--font-display);
  font-size: 34px;
  letter-spacing: -0.025em;
  line-height: 1.1;
  font-weight: 700;
  margin-top: 4px;
}
.ficha-variant {
  font-size: 14px;
  color: var(--ink-soft);
  margin-top: 6px;
}
.ficha-view-count {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--ink-soft);
}
.ficha-view-count svg { flex-shrink: 0; opacity: 0.7; }
.ficha-view-count:first-child { margin-top: 0; }

.ficha-price-block {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}
.ficha-price {
  font-family: var(--font-display);
  font-size: 32px;
  letter-spacing: -0.025em;
  line-height: 1;
  font-weight: 700;
}
.ficha-price .currency {
  font-family: var(--font-mono);
  font-size: 20px;
  color: var(--metal);
  margin-right: 4px;
}

.ficha-cuota-pill {
  text-align: right;
  flex: 0 0 auto;
  max-width: 100%;
}
.ficha-cuota-pill .label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--metal);
  white-space: nowrap;
}
.ficha-cuota-pill .value {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--accent);
  display: block;
  margin-top: 2px;
  white-space: nowrap;
}

/* Badge azul de vendedor verificado — junto al nombre del vendedor */
.ficha-seller-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.ficha-seller-verified {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--finance);
  background: var(--finance-soft);
  border: 1px solid var(--finance-border);
  border-radius: var(--r-pill);
  padding: 2px 7px;
}
.ficha-seller-verified svg { width: 10px; height: 10px; }

/* Contacto directo del vendedor — reemplaza el botón "Contactar" */
.ficha-seller-contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.fsc-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-soft);
  transition: color 150ms;
}
a.fsc-row:hover { color: var(--accent); }
.fsc-row svg {
  flex-shrink: 0;
  width: 15px; height: 15px;
  stroke: var(--metal);
}
/* WhatsApp: única fila de la lista en color de marca (ícono relleno + número),
   en vez del gris neutro del resto — igual que el logo BAC en la calculadora,
   para que se reconozca de un vistazo entre teléfono/correo/ubicación sin
   romper el resto del patrón (mismo tamaño, spacing y tipografía). */
.fsc-row--whatsapp,
.fsc-row--whatsapp svg { color: #25D366; }
.fsc-row--whatsapp svg { width: 15px; height: 15px; stroke: none; }
a.fsc-row--whatsapp:hover { color: #1da851; }

.ficha-seller {
  padding: var(--s-4);
  background: var(--paper-warm);
  border-radius: var(--r-2);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  border: 1px solid transparent;
  transition: border-color 200ms, background 200ms;
}

/* Vendedor registrado (particular con cuenta) — tratamiento más llamativo:
   borde y fondo con tinte accent, avatar más grande, nombre con más peso. */
.ficha-seller.is-registered {
  background: color-mix(in srgb, var(--accent) 9%, var(--paper-warm));
  border-color: color-mix(in srgb, var(--accent) 32%, transparent);
}
.ficha-seller.is-registered .ficha-seller-avatar {
  background: var(--accent);
  color: #fff;
  width: 52px;
  height: 52px;
  font-size: 17px;
}
.ficha-seller.is-registered .ficha-seller-info strong {
  font-size: 16px;
}

.ficha-seller-other-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: var(--s-2);
  padding: 10px;
  border: 1px dashed color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: var(--r-2);
  background: none;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background 150ms, border-style 150ms;
}
.ficha-seller-other-link:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); border-style: solid; }

/* Grid 2×2 — con 4 acciones (Alertas, Compartir, Extraer, Reportar) una
   sola fila queda muy angosta por botón y el texto se corta/envuelve.
   "Comparar" vive aparte, fuera de la card (.ficha-compare-cta más abajo). */
.ficha-link-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: var(--s-3);
}
.ficha-link-row .ficha-report-link { margin-top: 0; padding: 10px 4px; }
.ficha-link-row .ficha-report-link:nth-child(odd) {
  border-right: 1px solid var(--line);
}
.ficha-link-row .ficha-report-link:nth-child(-n+2) {
  border-bottom: 1px solid var(--line);
}

.ficha-report-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: var(--s-3);
  padding: 8px 0;
  background: none;
  border: none;
  font-size: 12px;
  font-weight: 500;
  color: var(--metal);
  cursor: pointer;
  transition: color 150ms;
}
.ficha-report-link svg { opacity: 0.8; }
.ficha-report-link:hover { color: var(--accent); }
.ficha-report-link.is-active { color: var(--accent); }
.ficha-report-link.is-active svg { opacity: 1; stroke: var(--accent); }

/* CTA "Comparar este vehículo" — a propósito fuera de .ficha-panel/-top (no
   comparte su borde/fondo/padding) y con más peso visual que ficha-link-row:
   botón sólido, no un link de ícono chiquito, para que destaque como acción
   secundaria propia de la página. Mismo verbo/ícono que .compare-mode-btn
   del listado — es la misma feature, solo que activada desde la ficha. */
.ficha-compare-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px;
  border: 1px solid var(--ink);
  border-radius: var(--r-2);
  background: var(--ink);
  color: var(--paper);
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background 150ms, border-color 150ms, color 150ms;
}
.ficha-compare-cta:hover { background: var(--accent); border-color: var(--accent); }
.ficha-compare-cta.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ============================================================================
   HOJA DE IMPRESIÓN — "Extraer" ficha técnica del vehículo
   ========================================================================= */
.print-sheet { display: none; }

.print-sheet .print-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 2px solid #000;
  padding-bottom: 10px;
  margin-bottom: 18px;
}
.print-sheet .print-logo {
  text-transform: lowercase;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.04em;
}
.print-sheet .print-logo span { color: var(--accent); }
.print-sheet .print-header p { font-size: 11px; }

.print-sheet .print-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 16px;
}

.print-sheet .print-photos { margin-bottom: 18px; }
.print-sheet .print-photo-main {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  border: 1px solid #000;
  margin-bottom: 8px;
}
.print-sheet .print-photo-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.print-sheet .print-photo-thumbs img {
  width: 100%;
  height: 80px;
  object-fit: cover;
  border: 1px solid #999;
}

.print-sheet .print-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid #000;
}
.print-sheet .print-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  border-bottom: 1px solid #999;
  border-right: 1px solid #999;
}
.print-sheet .print-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #555;
}
.print-sheet .print-value { font-size: 14px; font-weight: 600; }

.print-sheet .print-section { margin-top: 22px; }
.print-sheet .print-section h3 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid #000;
  padding-bottom: 6px;
  margin-bottom: 8px;
}
.print-sheet .print-section p { font-size: 13px; line-height: 1.6; }

.print-sheet .print-footer {
  margin-top: 30px;
  padding-top: 12px;
  border-top: 1px solid #999;
  font-size: 11px;
  color: #555;
}

@media print {
  body * { visibility: hidden; }
  .print-sheet, .print-sheet * { visibility: visible; }
  .print-sheet {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 24px;
    color: #000;
    background: #fff;
  }
}
.ficha-seller-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--metal-soft), var(--ink-soft));
  display: grid;
  place-items: center;
  color: var(--paper);
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
}
.ficha-seller-info { flex: 1; min-width: 0; }
.ficha-seller-info strong {
  font-size: 13px;
  display: block;
  font-weight: 500;
}
.ficha-seller-info span {
  font-size: 11px;
  color: var(--metal);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-family: var(--font-mono);
}

/* Tabs */
.ficha-tabs {
  margin-top: var(--s-7);
  grid-column: 1 / -1;
}
/* La ficha técnica ahora es un solo scroll continuo — los tabs quedan
   fijos arriba como navegación rápida ("accionables") que hacen scroll
   hasta la sección correspondiente en vez de mostrar/ocultar paneles. */
.tabs-nav {
  position: sticky;
  top: var(--header-h);
  z-index: 5;
  background: var(--bg-body);
  display: flex;
  gap: var(--s-5);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s-5);
  overflow-x: auto;
  /* El respiro sobre los tabs va DENTRO de la barra, no como hueco sobre ella:
     así queda cubierto por el fondo opaco y el contenido no se ve pasar entre
     el header y la navegación. */
  padding-top: var(--s-2);
}
.tab-btn {
  padding: var(--s-4) 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--metal);
  border-bottom: 2px solid transparent;
  transition: all 200ms;
  white-space: nowrap;
}
.tab-btn:hover { color: var(--ink); }
.tab-btn.is-active {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

.tab-panel {
  padding: var(--s-6) 0;
  border-top: 1px solid var(--line);
  /* Compensa el header fijo + la barra de tabs sticky al hacer scroll-into-view */
  scroll-margin-top: calc(var(--header-h) + var(--s-9));
}
.tab-panel:first-of-type { border-top: none; padding-top: 0; }
.tab-panel-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: var(--s-4);
}

.spec-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-5) var(--s-7);
}
.spec-row {
  display: flex;
  justify-content: space-between;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.spec-row .label { color: var(--metal); }
.spec-row .value {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0;
}

/* Contenedor de categorías de equipamiento — cada .feature-group es una
   sección independiente (label + chips), solo se renderizan las categorías
   con al menos un ítem presente en el auto. */
.feature-groups {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
.feature-group-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s-3);
}
.feature-empty {
  font-size: 13px;
  color: var(--ink-soft);
  font-style: italic;
}

/* Identificador del anuncio bajo el equipamiento: separado por una línea y en
   letra chica y apagada, para que no se lea como un ítem más del equipamiento. */
.ficha-listing-id {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--ink-soft);
}
.ficha-listing-id-label { font-weight: 500; }
.ficha-listing-id-value {
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
  user-select: all;
}

.feature-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.feature-chip {
  padding: 8px 14px;
  background: var(--paper-warm);
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 500;
}

/* ============================================================================
   CALCULADORA DE FINANCIAMIENTO (ficha) — solo autos financiables.
   Acento azul de financiamiento (--finance) según foundations.
   ========================================================================= */
.ficha-finance {
  margin-top: var(--s-4);
  padding-top: var(--s-7);
  border-top: 1px solid var(--line);
  /* Destino de la navegación por tabs: compensa el header fijo + la barra
     sticky, igual que .tab-panel. */
  scroll-margin-top: calc(var(--header-h) + var(--s-9));
}
.ficha-finance .tab-panel-title { margin-bottom: var(--s-5); }
.ffin-card {
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-top: 3px solid var(--finance);
  border-radius: var(--r-3);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
.ffin-intro {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.ffin-intro .ffin-bac { height: 22px; width: auto; flex-shrink: 0; }
.ffin-intro p {
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink);
  margin: 0;
  min-width: 0;
}
.ffin-intro strong { color: var(--finance); font-weight: 700; }

/* Resumen (Precio / Prima mínima / Base / Cuota) — filas label · valor */
.ffin-summary,
.ffin-calc-result {
  display: flex;
  flex-direction: column;
}
.ffin-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line);
}
.ffin-row:last-child { border-bottom: none; }
.ffin-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--metal);
}
.ffin-label sup { color: var(--finance); font-weight: 700; }
.ffin-val {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  text-align: right;
}
/* Precio de contado en colones, como referencia junto al monto en dólares. */
.ffin-alt {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--metal);
  letter-spacing: 0;
  margin-top: 2px;
}
.ffin-row--cuota {
  margin-top: var(--s-2);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  border-bottom: none;
}
.ffin-row--cuota .ffin-label { color: var(--ink-soft); }
.ffin-cuota {
  font-size: 24px;
  color: var(--finance);
}

.ffin-disclaimer {
  font-size: 12px;
  color: var(--metal);
  margin: 0;
}

.ffin-prompt {
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}
.ffin-prompt-q {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 4px;
}
.ffin-prompt-sub {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0;
}

/* Calculadora estilo home (fin-module) dentro de la ficha — único campo
   editable: la prima. Precio y plazo van fijos (readonly, atenuados). */
.ffin-module { margin: 0; }
.fin-input-wrap.is-fixed {
  opacity: 0.6;
  cursor: default;
}
.fin-input-wrap.is-fixed:focus-within {
  border-color: rgba(237, 240, 247, 0.14);
  background: rgba(237, 240, 247, 0.07);
}
.fin-input-wrap.is-fixed .fin-price-input { cursor: default; }
.fin-prima-amount.is-warning { color: var(--accent); font-weight: 600; }

@media (max-width: 540px) {
  .ffin-card { padding: var(--s-5); }
  .ffin-cuota { font-size: 20px; }
  .ffin-val { font-size: 15px; }
}

/* ============================================================================
   VEHÍCULOS SIMILARES — CARRUSEL
   ========================================================================= */
.similar-section {
  margin-top: var(--s-4);
  padding-top: var(--s-7);
  border-top: 1px solid var(--line);
}

.similar-header {
  margin-bottom: var(--s-6);
}

.similar-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.15;
  margin-bottom: var(--s-2);
}

.similar-title em {
  font-style: normal;
  color: var(--accent);
}

/* Contador junto al título en la ficha de modelo nuevo ("7 encontrados") */
.mn-similar-count {
  margin-left: var(--s-2);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--metal-soft);
  white-space: nowrap;
}

.similar-sub {
  font-size: 13px;
  color: var(--metal-soft);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}

.similar-track-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.similar-viewport {
  flex: 1;
  overflow: hidden;
}

.similar-track {
  display: flex;
  gap: var(--s-4);
  transition: transform 420ms var(--ease-expo);
}

/* Tarjetas del carrusel — misma .card que el home/resultados, solo con un
   ancho fijo para poder desplazarlas horizontalmente. */
.similar-track .card {
  flex: 0 0 260px;
  width: 260px;
}

/* Carousel arrows */
.similar-arrow {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 180ms, opacity 180ms;
  z-index: 2;
}

.similar-arrow:hover { background: var(--paper-warm); }
.similar-arrow:disabled { opacity: 0.3; cursor: default; }

.similar-arrow svg {
  width: 18px; height: 18px;
  stroke: var(--ink);
  stroke-width: 2;
  fill: none;
}

@media (max-width: 900px) {
  .similar-track .card { flex: 0 0 calc(50% - 8px); width: calc(50% - 8px); min-width: 180px; }
}
@media (max-width: 540px) {
  .similar-track .card { flex: 0 0 80vw; width: 80vw; scroll-snap-align: start; }
  .similar-arrow { display: none; }

  /* Permitir deslizar con el dedo: el scroll nativo reemplaza el desplazamiento
     por transform que solo movían los botones de flecha (ocultos en mobile). */
  .similar-viewport {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .similar-viewport::-webkit-scrollbar { display: none; }
  .similar-track {
    transform: none !important;
    scroll-snap-type: x mandatory;
  }
}

/* ============================================================================
   COMPARADOR FLOATING
   ========================================================================= */
.comparator {
  position: fixed;
  bottom: var(--s-5);
  right: var(--s-5);
  z-index: 40;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r-3);
  padding: var(--s-3) var(--s-4);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  transform: translateY(120%);
  transition: transform 450ms var(--ease-expo);
}
.comparator.is-active { transform: translateY(0); }

.comparator-stack {
  display: flex;
}
.comparator-item {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  overflow: hidden;
  margin-left: -10px;
  background: var(--paper-deep);
  position: relative;
  animation: stackIn 450ms var(--ease-expo);
}
.comparator-item:first-child { margin-left: 0; }
.comparator-item img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.comparator-item button {
  position: absolute;
  top: -4px; right: -4px;
  width: 18px; height: 18px;
  background: var(--accent);
  color: var(--paper);
  border-radius: 50%;
  font-size: 10px;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 200ms;
}
.comparator-item:hover button { opacity: 1; }

@keyframes stackIn {
  from { transform: scale(0) rotate(-15deg); }
  60% { transform: scale(1.1) rotate(5deg); }
  to { transform: scale(1) rotate(0); }
}

.comparator-text {
  font-size: 13px;
  font-weight: 500;
}
.comparator-text strong {
  font-family: var(--font-mono);
  color: var(--accent);
}

.comparator-clear {
  padding: 6px 10px;
  background: transparent;
  color: var(--metal);
  border: 1px solid rgba(52, 56, 73, 0.22);
  border-radius: var(--r-2);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  margin-left: var(--s-2);
  transition: color 200ms, border-color 200ms, background 200ms;
}
.comparator-clear:hover {
  color: var(--paper);
  border-color: var(--paper);
  background: rgba(52, 56, 73, 0.06);
}

.comparator-cta {
  padding: 8px 14px;
  background: var(--accent);
  color: var(--paper);
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 500;
  margin-left: var(--s-2);
  transition: background 200ms;
}
.comparator-cta:hover { background: var(--accent-deep); }

/* ============================================================================
   AUTOCOMPLETE DROPDOWN
   ========================================================================= */
.autocomplete {
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-lg);
  padding: var(--s-3);
  display: none;
  z-index: 20;
  color: var(--ink);
  max-height: 360px;
  overflow-y: auto;
}
.autocomplete.is-open { display: block; }
.autocomplete-section + .autocomplete-section { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.autocomplete-section-title {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--metal);
  padding: 6px var(--s-3);
}
.autocomplete-item {
  padding: 10px var(--s-3);
  border-radius: var(--r-2);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  transition: background 150ms;
}
.autocomplete-item:hover { background: var(--paper-deep); }
.autocomplete-item .arrow {
  margin-left: auto;
  color: var(--metal);
  opacity: 0;
  transition: opacity 150ms;
}
.autocomplete-item:hover .arrow { opacity: 1; }

/* ============================================================================
   TOAST
   ========================================================================= */
.toast {
  position: fixed;
  top: calc(var(--header-h) + var(--s-4));
  right: var(--s-5);
  z-index: 100;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r-2);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  transform: translateX(120%);
  transition: transform 380ms var(--ease-expo);
  box-shadow: var(--shadow-lg);
}
.toast.is-visible { transform: translateX(0); }
.toast::before {
  content: '✓';
  width: 22px; height: 22px;
  background: var(--accent);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
}

/* ============================================================================
   VIEW TRANSITIONS API
   ========================================================================= */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 500ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

::view-transition-old(card-hero),
::view-transition-new(card-hero) {
  animation-duration: 600ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================================
   CARD MODES — ECO & FINANCE
   ========================================================================= */

/* --- ECO MODE --- */
.card.mode-eco { border-color: var(--eco-border); background: var(--paper); }
.card.mode-eco:hover { border-color: var(--eco); }

/* Eco badge replaces verified in eco mode — positioned identically at top-left.
   JS only renders one or the other, never both. */
.card-badge-eco {
  position: absolute;
  top: 12px; left: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: var(--eco);
  color: #fff;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  z-index: 2;
}

/* Batería (kWh) — solo Zona Verde, exclusivo de eléctricos, precede a la
   autonomía con jerarquía visual menor (número más chico). */
.eco-battery {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: var(--s-2) 0 0;
}
.eco-battery .value {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--eco);
}
.eco-battery .unit {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--eco);
  font-weight: 500;
  opacity: 0.85;
}
.eco-battery + .eco-autonomy { margin-top: 0; }

.eco-autonomy {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: var(--s-2) 0 var(--s-1);
}
.eco-autonomy .value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--eco);
}
.eco-autonomy .unit {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--eco);
  font-weight: 500;
}

.eco-charge {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--eco);
  letter-spacing: 0.04em;
  margin-bottom: var(--s-2);
}

/* Bloque eco compacto (2 líneas) — mismas medidas que .card-price-main /
   .card-cuota para que las tarjetas de modo eco/zonaverde midan lo mismo
   que las tarjetas por defecto. */
.card-eco-headline {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.card-eco-headline .value {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--eco);
  line-height: 1;
}
.card-eco-headline .unit {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1;
  color: var(--eco);
  font-weight: 500;
  opacity: 0.85;
}
.card-eco-detail {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--metal);
  margin-top: 3px;
  letter-spacing: 0;
}

.eco-saving-strip {
  margin-top: var(--s-3);
  padding: 8px 10px;
  background: var(--eco-soft);
  border-radius: var(--r-2);
  font-size: 12px;
  color: var(--eco);
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--eco-border);
}
.eco-saving-strip strong { font-weight: 600; }

/* --- FINANCE MODE --- */
.card.mode-finance { border-color: var(--finance-border); }
.card.mode-finance:hover { border-color: var(--finance); }

.finance-badge-strip {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 6px 12px;
  background: var(--finance);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
}

.card-cuota-primary {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 4px;
}
.card-cuota-primary .cuota-value {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--finance);
  line-height: 1;
}
.card-cuota-primary .cuota-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--finance);
  font-weight: 500;
}

.card-price-secondary {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--metal);
  text-decoration: line-through;
  margin-bottom: var(--s-2);
}
.card-price-secondary span { text-decoration: none; color: var(--ink-soft); margin-left: 4px; }

.finance-terms {
  padding: 8px 10px;
  background: var(--finance-soft);
  border-radius: var(--r-2);
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--finance);
  display: flex;
  gap: var(--s-3);
  margin: var(--s-2) 0;
  border: 1px solid var(--finance-border);
}
.finance-terms span { display: flex; flex-direction: column; gap: 2px; }
.finance-terms .term-label { opacity: 0.7; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; }
.finance-terms .term-val { font-weight: 600; font-size: 12px; }

/* ---- Mode context banner ---- */
.mode-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-3);
  border: 1px solid transparent;
  margin-bottom: var(--s-5);
  animation: chipIn 320ms var(--ease-expo);
}
.mode-banner-icon {
  font-size: 22px;
  flex-shrink: 0;
  margin-top: 1px;
}
.mode-banner > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}
.mode-banner-sub {
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.4;
}
.mode-banner-close {
  padding: 6px 12px;
  border: 1px solid currentColor;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 600;
  opacity: 0.7;
  transition: opacity 200ms;
  white-space: nowrap;
  color: var(--ink-soft);
  flex-shrink: 0;
}
.mode-banner-close:hover { opacity: 1; }

/* ============================================================================
   HOME BOTTOM FILTERS
   ========================================================================= */
.home-filters-section {
  background: var(--paper-deep);
  border-top: 1px solid var(--line);
  padding: var(--s-8) 0 var(--s-9);
}

.home-filters-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--s-6);
}

.home-results-section {
  padding: var(--s-7) 0 var(--s-8);
}

.home-results-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--s-6);
}

.home-filters-head {
  margin-bottom: var(--s-6);
}

.home-filters-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-bottom: var(--s-2);
}
.home-filters-title em { font-style: normal; color: var(--accent); }

.home-filters-sub {
  font-size: 14px;
  color: var(--ink-soft);
}

.home-filters-grid {
  background: rgba(255, 255, 255, 0.97);
  border-radius: var(--r-3);
  box-shadow: 0 8px 40px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.25);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Row containers */
/* Todas las filas comparten la misma retícula de 4 columnas, para que los
   campos queden alineados de una fila a la siguiente: Estilo ocupa 2 columnas
   en la fila 1 y Año / Precio 2 + 2 en la fila 4 (ver más abajo). */
.hf-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
@media (min-width: 901px) {
  .hf-row[data-hf-row="brand-model-style"] [data-hf-field="estilo"] { grid-column: span 2; }
}
/* Año y Precio: el título de Precio lleva el selector de moneda y es más alto;
   ambos títulos miden lo mismo para que los campos queden a la misma altura. */
.hf-row[data-hf-row="year-price"] .hf-group-title { min-height: 22px; display: flex; align-items: center; }
/* Kilometraje: el campo y su unidad en una sola fila, como el rango de Año. */
.hf-km-inline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px;
  gap: 8px;
}
.hf-row--ranges {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}

/* Individual group */
.hf-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hf-group--full {
  width: 100%;
}

/* Group title — matches hero-exp-label */
.hf-group-title {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b7280;
}
.hf-group-title span {
  color: inherit;
  font-weight: 700;
}
.hf-price-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.hf-currency-toggle {
  display: flex;
  gap: 4px;
}
.hf-currency-btn {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 99px;
  background: transparent;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  color: #6b7280;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  font-family: var(--font-sans);
}
.hf-currency-btn:hover:not(.is-active) {
  background: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.25);
}
.hf-currency-btn.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.hf-currency-btn:active { transform: scale(0.94); }

/* Pills container */
.hf-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Select dropdowns — mirror hero-exp-select for light card context */
.hf-select {
  width: 100%;
  background: #f9fafb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 8px center;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: var(--r-2);
  padding: 7px 28px 7px 10px;
  font-size: 13px;
  font-weight: 500;
  color: #111827;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--font-sans);
  transition: border-color 150ms;
}
.hf-select:focus { border-color: var(--accent); outline: none; }
.hf-select:disabled { opacity: 0.4; cursor: default; }

/* Multi-select dropdown (Marca / Modelo) — checkbox list in a floating panel */
.hf-msel {
  position: relative;
}
.hf-msel-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: #f9fafb;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: var(--r-2);
  padding: 7px 10px;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-sans);
  color: #111827;
  cursor: pointer;
  outline: none;
  transition: border-color 150ms;
}
.hf-msel-trigger:focus,
.hf-msel.is-open .hf-msel-trigger { border-color: var(--accent); }
.hf-msel-trigger:disabled { opacity: 0.4; cursor: default; }
.hf-msel-trigger-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hf-msel-chevron {
  flex-shrink: 0;
  stroke: #6b7280;
  transition: transform 150ms;
}
.hf-msel.is-open .hf-msel-chevron { transform: rotate(180deg); }

.hf-msel-panel {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 240px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: var(--r-2);
  box-shadow: 0 8px 24px rgba(0,0,0,0.14);
  padding: 4px;
}
.hf-msel.is-open .hf-msel-panel { display: block; }
.hf-msel-panel-hint {
  padding: 8px 10px;
  font-size: 13px;
  color: #6b7280;
}
.hf-msel-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: var(--r-1);
  font-size: 13px;
  color: #111827;
  cursor: pointer;
}
.hf-msel-option:hover { background: #f3f4f6; }
.hf-msel-option input { accent-color: var(--accent); }

/* Individual pill — matches hero-exp-pill */
.hf-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 14px;
  border: 1px solid rgba(0,0,0,0.14);
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 500;
  color: #374151;
  background: transparent;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms, transform 100ms;
  white-space: nowrap;
  user-select: none;
  font-family: var(--font-sans);
}
.hf-pill:hover:not(.is-active) {
  background: rgba(0,0,0,0.05);
}
.hf-pill.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.hf-pill.is-active:hover {
  filter: brightness(1.1);
}
.hf-pill:active { transform: scale(0.96); }

/* Range group */
.hf-range-wrap {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.hf-range-bound {
  font-family: var(--font-sans);
  font-size: 11px;
  color: #6b7280;
  white-space: nowrap;
  flex-shrink: 0;
}
.hf-slider { flex: 1; min-width: 0; }

/* Range slider overrides for light card context */
.home-filters-grid .range-slider {
  background: rgba(0,0,0,0.12);
}
.home-filters-grid .range-slider::-webkit-slider-thumb {
  background: #111827;
  border: 3px solid #fff;
}
.home-filters-grid .range-slider::-moz-range-thumb {
  background: #111827;
  border: 3px solid #fff;
}

/* Range text inputs — year / price */
.hf-range-inputs {
  display: flex;
  align-items: center;
  gap: 6px;
}
.hf-text-input {
  flex: 1;
  min-width: 0;
  background: #f9fafb;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: var(--r-2);
  padding: 7px 10px;
  font-size: 13px;
  font-weight: 500;
  color: #111827;
  outline: none;
  font-family: var(--font-sans);
  transition: border-color 150ms;
}
.hf-text-input:focus { border-color: var(--accent); }
.hf-text-input::placeholder { color: #9ca3af; font-weight: 400; }
.hf-range-sep {
  color: #9ca3af;
  font-size: 13px;
  flex-shrink: 0;
}

/* Kilometraje — mismo tratamiento visual que los demás campos de este
   card de fondo blanco (en vez del estilo oscuro del sidebar). */
.home-filters-grid .km-input {
  background: #f9fafb;
  border: 1px solid rgba(0,0,0,0.12);
  color: #111827;
  font-weight: 500;
}
.home-filters-grid .km-input::placeholder { color: #9ca3af; font-weight: 400; }
.home-filters-grid .km-input:focus { border-color: var(--accent); }
.home-filters-grid .km-input-suffix { color: #6b7280; }

/* 2-column row */
.hf-row--2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* Footer bar */
.hf-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,0.07);
  margin-top: 2px;
  flex-wrap: wrap;
}
.hf-footer-left {
  font-size: 13px;
  color: #6b7280;
  font-family: var(--font-sans);
}
.hf-clear-btn {
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
  cursor: pointer;
  background: none;
  border: none;
  padding: 6px 0;
  font-family: var(--font-sans);
  transition: color 150ms;
}
.hf-clear-btn:hover { color: #374151; }

.hf-apply-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  background: var(--accent);
  color: #fff;
  border-radius: var(--r-2);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 150ms;
  border: none;
  font-family: var(--font-sans);
  letter-spacing: -0.01em;
}
.hf-apply-btn:hover { background: var(--accent-deep); }

/* Responsive */
@media (max-width: 900px) {
  .hf-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hf-row--ranges { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hf-row--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .home-filters-grid { padding: 16px; gap: 12px; }
  .home-filters-inner { padding: 0 var(--s-4); }
}

@media (max-width: 540px) {
  .home-filters-inner { padding: 0 12px; }
  .home-filters-title { font-size: 22px; }
  .hf-row { grid-template-columns: minmax(0, 1fr); }
  .hf-row--ranges { grid-template-columns: minmax(0, 1fr); }
  .hf-row--2 { grid-template-columns: minmax(0, 1fr); }
  .hf-price-title { flex-wrap: wrap; }
  .home-filters-grid { padding: 12px; gap: 10px; }
  .hf-pills { gap: 4px; }
  .hf-pill { padding: 4px 10px; font-size: 11px; }
  .hf-footer { flex-direction: column; align-items: stretch; gap: 10px; }
  .hf-footer > div { justify-content: flex-end; }
  .hf-apply-btn { width: 100%; justify-content: center; }
}

/* ============================================================================
   MOBILE FILTERS OVERLAY — header / footer / FAB
   ========================================================================= */

/* Header mobile del panel (oculto en desktop) */
.filters-mobile-header {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 1;
  flex-shrink: 0;
}

.filters-mobile-back {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--accent);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  padding: var(--s-1) 0;
  font-family: var(--font-sans);
  -webkit-tap-highlight-color: transparent;
}

.filters-mobile-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--metal);
  flex: 1;
  text-align: center;
}

.filters-mobile-clear {
  background: none;
  border: none;
  font-size: 13px;
  color: var(--metal);
  cursor: pointer;
  padding: var(--s-1) 0;
  font-family: var(--font-sans);
  text-decoration: underline;
  -webkit-tap-highlight-color: transparent;
}
.filters-mobile-clear:active { color: var(--accent); }

/* Slot que recibe (vía JS, ver placeHomeFiltersForViewport()) los mismos
   campos del filtro inferior del home — tanto en el drawer de mobile
   como en el sidebar de desktop (mientras se está en view-resultados). */
.filters-mobile-home-slot { display: block; padding: var(--s-5) 0; }
.filters-mobile-home-slot .home-filters-grid { box-shadow: none; }

/* Las filas del footer usan grids de 2-3 columnas pensadas para el ancho
   completo de la página; dentro del sidebar angosto siempre van en una
   sola columna, sin importar el viewport. */
.filters-mobile-home-slot .hf-row,
.filters-mobile-home-slot .hf-row--2,
.filters-mobile-home-slot .hf-row--ranges {
  grid-template-columns: minmax(0, 1fr);
}

/* ── Sidebar de filtros de resultados (y su drawer mobile) ──────────────────
   Todo el espaciado sale de la escala --s-N: 24px entre filtros (--s-5), 8px
   entre el título y su control (--s-2), 8px entre chips y entre desde/hasta,
   y 24px de relleno de la tarjeta. Los controles miden 40px de alto para que
   sean cómodos al tocar y queden todos alineados.
   Una sola columna siempre: la regla de Estilo (span 2) y el recorte de
   "Autos nuevos" (3 columnas) son de la retícula ancha del home y aquí
   creaban una segunda columna que dejaba Marca y Modelo a medio ancho. */
.filters-mobile-home-slot .home-filters-grid {
  padding: var(--s-5);
  gap: var(--s-5);
}
.filters-mobile-home-slot .home-filters-grid .hf-row[data-hf-row] {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-5);
}
.filters-mobile-home-slot .home-filters-grid .hf-row [data-hf-field] {
  grid-column: auto;
}
.filters-mobile-home-slot .hf-group { gap: var(--s-2); }
.filters-mobile-home-slot .hf-group-title,
.filters-mobile-home-slot .hf-row[data-hf-row="year-price"] .hf-group-title {
  min-height: 0;
  line-height: 1.4;
}
.filters-mobile-home-slot .hf-pills { gap: var(--s-2); }
.filters-mobile-home-slot .hf-pill {
  min-height: 32px;
  padding: var(--s-1) var(--s-3);
  justify-content: center;
}
.filters-mobile-home-slot .hf-select,
.filters-mobile-home-slot .hf-msel-trigger,
.filters-mobile-home-slot .hf-text-input {
  min-height: 40px;
  padding: var(--s-2) var(--s-3);
}
.filters-mobile-home-slot .hf-select {
  padding-right: var(--s-6);
  background-position: right var(--s-3) center;
}
.filters-mobile-home-slot .hf-msel-panel { top: calc(100% + var(--s-1)); padding: var(--s-1); }
.filters-mobile-home-slot .hf-msel-option { padding: var(--s-2); gap: var(--s-2); }
.filters-mobile-home-slot .hf-range-inputs,
.filters-mobile-home-slot .hf-km-inline { gap: var(--s-2); }
.filters-mobile-home-slot .hf-km-inline { grid-template-columns: minmax(0, 1fr) 80px; }
/* El selector ₡/$ pasa a su propia línea bajo el título "Precio" en vez de
   comprimir el título contra el borde del sidebar. */
.filters-mobile-home-slot .hf-price-title { flex-wrap: wrap; gap: var(--s-2); }
.filters-mobile-home-slot .hf-currency-toggle { gap: var(--s-1); }
.filters-mobile-home-slot .hf-currency-btn { padding: var(--s-1) var(--s-2); }
/* Pie: la nota arriba y los botones debajo, apilados; "Buscar" a todo el ancho. */
.filters-mobile-home-slot .hf-footer {
  flex-direction: column;
  align-items: stretch;
  gap: var(--s-3);
  margin-top: 0;
  padding-top: var(--s-4);
}
.filters-mobile-home-slot .hf-footer > div {
  flex-direction: row-reverse;
  justify-content: space-between;
  gap: var(--s-3) !important;
}
.filters-mobile-home-slot .hf-apply-btn {
  flex: 1;
  justify-content: center;
  min-height: 40px;
  padding: var(--s-2) var(--s-5);
}
.filters-mobile-home-slot .hf-clear-btn { padding: var(--s-2) 0; }
@media (max-width: 900px) {
  .filters-mobile-home-slot .home-filters-grid { padding: var(--s-4); gap: var(--s-4); }
  .filters-mobile-home-slot .home-filters-grid .hf-row[data-hf-row] { gap: var(--s-4); }
}

/* Footer mobile del panel (oculto en desktop) */
.filters-mobile-footer {
  display: none;
  padding: var(--s-4) var(--s-5);
  padding-bottom: max(var(--s-5), env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--paper);
  position: sticky;
  bottom: 0;
  z-index: 1;
  flex-shrink: 0;
}

.filters-mobile-apply {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  width: 100%;
  padding: 14px var(--s-5);
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--r-2);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-sans);
  letter-spacing: -0.01em;
  transition: background 150ms;
  -webkit-tap-highlight-color: transparent;
}
.filters-mobile-apply:active { background: var(--accent-deep); }

/* Floating Action Button — visible solo en mobile vía JS */
.filter-fab {
  display: none;
  position: fixed;
  bottom: calc(20px + env(safe-area-inset-bottom));
  right: 20px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  border: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  z-index: 400;
  -webkit-tap-highlight-color: transparent;
}
.filter-fab:active { transform: scale(0.92); }
/* Oculta la lupa flotante mientras el panel de filtros está abierto —
   evita que quede flotando sobre su propio contenido. */
.filter-fab.is-drawer-open { opacity: 0 !important; pointer-events: none !important; }

.filter-fab-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background: #e53935;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 2px solid var(--paper);
  line-height: 1;
}
.filter-fab-badge:not(:empty) { display: flex; }

/* ============================================================================
   RESPONSIVE
   ========================================================================= */
/* ── Filter toggle button (visible only on mobile) ─────────────────────── */
.filters-toggle-btn {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 11px var(--s-4);
  margin-bottom: var(--s-4);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 200ms, color 200ms;
  -webkit-tap-highlight-color: transparent;
}
.filters-toggle-btn svg {
  width: 16px; height: 16px;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  flex-shrink: 0;
  transition: transform 280ms var(--ease-expo);
}
.filters-toggle-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.filters-toggle-btn.has-filters {
  border-color: var(--accent);
  color: var(--accent);
}
.filters-badge {
  background: var(--accent);
  color: #fff;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  line-height: 1.4;
  display: none;
}
.filters-toggle-btn.has-filters .filters-badge { display: inline-block; }

/* Sección que solo contiene el botón "Buscar autos" (nuevos / premium, que no
   tienen grilla propia): existe únicamente en mobile. */
.filters-toggle-section { display: none; }

@media (max-width: 900px) {
  /* Header: logo | [Ingresar] [Crear cuenta] [☰] */
  .header-inner { grid-template-columns: auto 1fr; gap: var(--s-3); }
  /* "crautos.com" es ~67% más ancho que el logotipo anterior: en el header
     compacto se escala con el ancho de pantalla para no empujar al resto de
     acciones. Escala completo, así que sigue siendo un solo tamaño. */
  .logo { font-size: clamp(14px, 4.6vw, 24px); }
  .nav-primary { display: none; }
  .hamburger-btn { display: flex !important; }
  .header-actions .btn-ingresar { display: inline-flex; font-size: 13px; }
  .header-actions .btn-registrar { display: inline-flex; font-size: 13px; padding: 6px 12px; }
  .header-actions .lang-toggle { display: none; }
  .header-actions .icon-btn { display: none; }
  .header-actions { gap: var(--s-2); justify-content: flex-end; }
  .hero-stat { text-align: left; }
  .hero-stat::before { display: none; }
  .listado-grid { grid-template-columns: 1fr; }

  /* Filters: botón visible en mobile, panel como overlay full-screen */
  .filters-toggle-btn { display: flex; }
  .filters-toggle-section { display: block; padding-top: 0; padding-bottom: 0; }
  /* Solo la card de Usados (sin trigger colapsable, filtros siempre expuestos)
     se oculta en mobile — la del home SÍ debe verse (colapsada a su trigger,
     ver regla .hero-search-trigger más abajo). Antes esto apuntaba a
     .hero-search-card genérico y también tapaba el buscador del home. */
  .usados-search-card { display: none; }
  .filters {
    display: none;
    position: fixed;
    inset: 0;
    /* Altura explícita: con inset:0 el panel crecía hasta el alto de su
       contenido y la parte inferior quedaba fuera de pantalla, sin scroll.
       dvh respeta la barra del navegador en móviles; vh es el respaldo. */
    height: 100vh;
    height: 100dvh;
    z-index: 500;
    background: var(--paper);
    /* El scroll vive en el contenido (.filters-mobile-home-slot), así el
       encabezado y el botón "Buscar" quedan siempre visibles. */
    overflow: hidden;
    padding: 0;
    max-height: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
  .filters.is-open {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
    animation: filtersMobileSlideIn 300ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .filters-mobile-header,
  .filters-mobile-footer { flex-shrink: 0; }
  @keyframes filtersMobileSlideIn {
    from { opacity: 0; transform: translateX(30px); }
    to   { opacity: 1; transform: translateX(0); }
  }

  /* En mobile el panel muestra los mismos campos del filtro inferior del
     home (reubicados vía JS dentro de .filters-mobile-home-slot) en vez de
     los grupos del sidebar de escritorio. */
  .filters > .filter-group {
    display: none;
  }
  /* Área scrolleable del drawer: ocupa lo que sobra entre header y footer.
     min-height:0 es lo que permite que un item flex se encoja y muestre su
     propia barra de scroll en vez de estirar al contenedor. */
  .filters-mobile-home-slot {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: var(--s-4) var(--s-5);
  }
  /* En mobile ya existe un header/footer propios del drawer (Volver /
     Limpiar todo / Buscar) — se ocultan los del grid reubicado para no
     duplicar botones. En desktop sí se muestran (no hay otro mecanismo). */
  .filters-mobile-home-slot .hf-footer {
    display: none;
  }

  /* Header mobile dentro del panel */
  .filters-mobile-header {
    display: flex;
  }

  /* Footer mobile dentro del panel */
  .filters-mobile-footer {
    display: block;
    margin-top: auto;
  }

  /* FAB: visible pero oculto por defecto, aparece con JS */
  .filter-fab {
    display: flex;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.85);
    transition: opacity 250ms, transform 250ms;
  }
  .filter-fab.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
  }

  /* 2-column grid on tablet (overridden to 1-col below 540px) */
  .results-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }

  .ficha-layout { flex-direction: column; }
  .ficha-panel { position: static; width: 100%; }
  .ficha-gallery { grid-template-columns: 1fr; }
  .gallery-thumbs {
    flex-direction: row;
    overflow-x: auto;
  }
  .gallery-thumb { width: 70px; flex-shrink: 0; }
  .fin-module { grid-template-columns: 1fr; padding: var(--s-5); }
  .fin-module--compact { padding: var(--s-4) var(--s-5); }
  .trust-band { grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
  .listado-header { grid-template-columns: minmax(0, 1fr); }
  .spec-grid { grid-template-columns: 1fr; }
  .view-controls { flex-wrap: wrap; row-gap: var(--s-3); }
  .sort-select, .currency-select { text-align: center; text-align-last: center; }

  /* Comparator bar: full-width bottom dock, wraps into two rows so the
     "Comparar" CTA gets a full-width, easy-to-tap button on mobile. */
  .comparator {
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: var(--r-3) var(--r-3) 0 0;
    padding: var(--s-3) var(--s-4) max(var(--s-3), env(safe-area-inset-bottom));
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: var(--s-3);
  }
  .comparator-text { flex: 1; }
  .comparator-clear { margin-left: 0; }
  .comparator-cta {
    flex-basis: 100%;
    margin-left: 0;
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
  }
}

@media (max-width: 540px) {
  .hero-headline { font-size: 44px; }
  .listado-title { font-size: 28px; }
  :root { --header-h: 60px; }
  .header-inner { padding: 0 var(--s-4); }
  .listado-section { padding: var(--s-5) var(--s-4); }
  .ficha-section { padding: var(--s-4) var(--s-4) var(--s-7); }
  .ficha-topbar { padding: var(--s-3) var(--s-4); }
  .sell-header { padding-left: var(--s-4); padding-right: var(--s-4); }
  .reg-breadcrumb-header { padding-left: var(--s-4) !important; padding-right: var(--s-4) !important; }
  .trust-band { grid-template-columns: 1fr; }
  /* Móvil pequeño: ambos botones compactos */
  .header-actions .btn-ingresar { display: inline-flex; font-size: 12px; padding: 5px 10px; }
  .header-actions .btn-registrar { font-size: 12px; padding: 5px 10px; }

  /* ── 2-column grid: 2 cards por pantalla ───────────────── */
  .results-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }

  /* ── Card: vertical, foto arriba — sin overlays ─────────── */
  .card { flex-direction: column; }
  .card:hover { transform: none; }

  /* Foto 4:3 para que el carro se vea bien */
  .card-photo-wrap { aspect-ratio: 4/3; }

  /* Nada encima de la foto — foto completamente limpia */
  .card-photo-wrap .card-photos-dots,
  .card-photo-wrap .card-carousel-bar { display: none; }

  /* Fav: pequeño, esquina sup-der */
  .card-fav { width: 26px; height: 26px; top: 5px; right: 5px; }
  .card-fav svg { width: 11px; height: 11px; }

  /* Select mark: junto al fav, también reducido */
  .card-select-mark { width: 20px; height: 20px; top: 5px; right: 37px; }
  .card-select-mark svg { width: 11px; height: 11px; }

  /* ── Info ────────────────────────────────────────────────── */
  .card-body { padding: 8px 8px 7px; gap: 2px; }

  /* Badges — ajuste de tamaño en móvil */
  .card-badges-body { gap: 3px; margin-bottom: 2px; }
  .card-badges-body .card-badge-verified,
  .card-badges-body .card-badge-armored,
  .card-badges-body .card-badge-eco { font-size: 7px; padding: 2px 5px; gap: 2px; }
  .cbadge-finance {
    background: var(--finance, #1a5fa8);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.12);
  }

  /* Marca */
  .card-seller-pill { display: none; }
  .card-brand-mono { font-size: 15px; letter-spacing: -0.01em; }
  .card-header-row { margin-bottom: 0; }

  /* Identidad */
  .card-identity { gap: 2px; }

  /* Nombre */
  .card-model { font-size: 11px; line-height: 1.2; }
  .card-variant { display: none; }
  .card-footer-info { display: none; }

  /* Specs: fila inline compacta */
  .card-specs-line { font-size: 10px; gap: 4px 8px; }

  /* Precio */
  .card-price-main { font-size: 13px; }
  .card-price-main .currency { font-size: 10px; }
  .card-price-main .price-alt { font-size: 9px; }
  .card-cuota { font-size: 8px; margin-top: 1px; }

  /* Toggle grilla/lista: visible en mobile (ver estilos de .view-list
     específicos para mobile más abajo en el archivo) */
  .view-toggle { display: flex; }

  /* Financial module */
  .fin-module { padding: var(--s-4); gap: var(--s-4); }
  .fin-headline { font-size: 24px; }

  /* Section headers on mobile */
  .results-section-head { flex-direction: column; gap: var(--s-1); align-items: flex-start; }
  .results-section-sub { white-space: normal; }
  .results-section-title { font-size: 17px; }

  /* Compact financial module — stack on mobile */
  .fin-module--compact { padding: var(--s-4) var(--s-4); gap: var(--s-3); }
  .fin-c-title { font-size: 22px; }
  .fin-c-row { flex-direction: column; gap: var(--s-3); }
  .fin-field, .fin-field--result { min-width: 0; width: 100%; flex: none; padding-left: 0; border-left: none; }
  .fin-cta--sm { width: 100%; justify-content: center; }
}


/* ============================================================================
   CARD — AUTO-CAROUSEL & BADGES
   ========================================================================= */

/* Dots: always visible (not just on hover) */
.card-photos-dots {
  opacity: 0.75;
}
.card:hover .card-photos-dots { opacity: 1; }
.card-photos-dots .dot {
  background: rgba(237, 240, 247, 0.45);
  transition: all 280ms var(--ease-expo);
}
.card-photos-dots .dot.is-current {
  background: var(--paper);
  width: 20px;
  border-radius: 3px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

/* Carousel progress bar at the very bottom of the photo */
.card-carousel-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(237, 240, 247, 0.15);
  z-index: 3;
  overflow: hidden;
}
.card-carousel-bar-fill {
  height: 100%;
  background: rgba(237, 240, 247, 0.75);
  width: 0%;
  transition: width linear;
  will-change: width;
}

/* ── Badge system ────────────────────────────────────────────────────────── */

/* Top-left: primary status badge (Armored overrides Verified) */
.card-badge-armored {
  position: absolute;
  top: 12px; left: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: rgba(0, 0, 0, 0.65);
  color: var(--ink);
  border-radius: var(--r-pill);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  z-index: 3;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(237,240,247,0.15);
}
.card-badge-armored::before { content: '🛡'; font-size: 11px; }

/* Bottom badges row */
/* Photo overlays removed — all badges live in card body */
.card-photo-wrap .card-badge-verified,
.card-photo-wrap .card-badge-armored,
.card-photo-wrap .card-badge-eco,
.card-photo-wrap .finance-badge-strip,
.card-photo-wrap .card-badges-bottom { display: none; }

.card-badges-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
}
.card-badges-body:empty { display: none; }
.card-badges-body .card-badge-verified,
.card-badges-body .card-badge-armored,
.card-badges-body .card-badge-eco {
  position: static;
  font-size: 9px;
  padding: 3px 7px;
  gap: 3px;
}
.card-badges-body .card-badges-bottom {
  position: static;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.card-badges-bottom {
  position: absolute;
  bottom: 30px;
  left: 10px;
  right: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  z-index: 3;
  pointer-events: none;
}

.cbadge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  line-height: 1.2;
  white-space: nowrap;
}

.cbadge-seller {
  background: rgba(30, 77, 59, 0.88);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.12);
}
.cbadge-seller::before { content: '✓ '; }

.cbadge-lowkm {
  background: rgba(26, 58, 107, 0.88);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.12);
}
.cbadge-lowkm::before { content: '↓ '; }

.cbadge-negotiable {
  background: rgba(200, 100, 20, 0.90);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.12);
}
.cbadge-negotiable::before { content: '💬 '; font-size: 9px; }

.cbadge-electric {
  background: rgba(26, 107, 60, 0.90);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.12);
}
.cbadge-electric::before { content: '⚡ '; font-size: 9px; }

.cbadge-featured {
  background: rgba(160, 110, 0, 0.92);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.12);
}


/* Paid promotion tags — full-width strip between photo and card body */
.card-promo-strip {
  position: relative;
  height: 26px;
  overflow: hidden;
  flex-shrink: 0;
}

.card-promo-item {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--ptag-color, #444);
  opacity: 0;
  transition: opacity 0.55s ease;
  white-space: nowrap;
  pointer-events: none;
}

.card-promo-item.is-active {
  opacity: 1;
}


/* ============================================================================
   CARD REDESIGN — Modern vehicle cards v2
   ========================================================================= */

/* Default shadow for subtle depth on all cards */
.card {
  box-shadow: 0 1px 3px rgba(0,0,0,0.25), 0 4px 12px rgba(0,0,0,0.2);
}
.card:hover {
  box-shadow: var(--shadow-hover);
}

/* ── Card header: brand + seller pill ── */
.card-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 1px;
}

.card-brand-mono {
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 800;
  line-height: 1.1;
}

.card-seller-pill {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  flex-shrink: 0;
}
.seller-con {
  background: var(--ink);
  color: var(--paper);
}
.seller-par {
  background: var(--paper-deep);
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
}

/* Year suffix — lighter weight after model name */
.card-yr {
  font-family: var(--font-mono);
  font-weight: 400;
  color: var(--metal);
  font-size: 0.65em;
  letter-spacing: 0.02em;
  vertical-align: middle;
}

/* Vehicle variant subtitle */
.card-variant {
  font-size: 11.5px;
  color: var(--metal);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.3;
  margin-top: 1px;
  margin-bottom: var(--s-2);
  font-family: var(--font-sans);
}

/* ── Price zone: CRC + USD in a warm contained block ── */
.card-price-zone {
  background: linear-gradient(135deg, var(--paper-warm) 0%, var(--paper-deep) 100%);
  border-radius: var(--r-2);
  padding: 10px var(--s-3) 8px;
  border: 1px solid var(--line);
  margin-top: var(--s-2);
}

.card-price-crc {
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1;
  color: var(--ink);
}
.card-price-crc .currency {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--metal);
  font-weight: 400;
  margin-right: 1px;
  vertical-align: baseline;
}

.card-price-usd {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink-soft);
  font-weight: 500;
  margin-top: 5px;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: 4px;
}
.card-price-usd .usd-label {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--metal-soft);
  font-weight: 400;
}
.card-price-usd.inline {
  display: inline;
  margin-left: 8px;
  font-size: 11px;
  vertical-align: middle;
}
.eco-usd {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--metal);
  margin-top: var(--s-2);
  letter-spacing: 0.02em;
  opacity: 0.85;
}

/* ── Compact price row (default mode) ── */
.card-price-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}
.card-price-inline {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.card-price-row .card-cuota {
  margin-top: 0;
  text-align: left;
  flex-shrink: 0;
}

/* ── Single-line meta (year · km · fuel · location) ── */
.card-meta-inline {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── In-body notice badges (negotiable / low mileage) ── */
.card-notices {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: var(--s-2);
}
.notice {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.notice-negotiable {
  background: rgba(200, 100, 20, 0.10);
  color: rgba(180, 85, 10, 0.95);
  border: 1px solid rgba(200, 100, 20, 0.22);
}
.notice-negotiable::before {
  content: '💬';
  font-size: 9px;
}
.notice-lowkm {
  background: rgba(26, 58, 107, 0.09);
  color: var(--finance);
  border: 1px solid rgba(26, 58, 107, 0.18);
}
.notice-lowkm::before {
  content: '↓';
  font-weight: 900;
  font-size: 11px;
}

/* ── Card footer: location + seller name ── */
.card-footer-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--metal);
  margin-top: var(--s-2);
  letter-spacing: 0.02em;
}
.card-loc {
  display: flex;
  align-items: center;
  gap: 3px;
}
.card-loc::before {
  content: '⚑';
  font-size: 10px;
  color: var(--metal-soft);
}
.card-sname {
  font-size: 10px;
  color: var(--metal);
  max-width: 50%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Kilometraje máximo — campo numérico con sufijo "km" */
.km-input-wrap {
  position: relative;
}
.km-input {
  width: 100%;
  padding: 10px 38px 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  font-size: 14px;
  font-family: var(--font-sans);
  background: var(--paper-warm);
  color: var(--ink);
  outline: none;
  transition: border-color 200ms, box-shadow 200ms;
}
.km-input::placeholder { color: var(--metal); }
.km-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(232, 97, 78, 0.12);
}
.km-input-suffix {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  font-size: 12px;
  font-weight: 600;
  color: var(--metal);
  pointer-events: none;
}

/* ============================================================================
   FILTER — PREDICTIVE SEARCH
   ========================================================================= */
.filter-search-wrap {
  margin-bottom: var(--s-3);
  position: relative;
}

.filter-search-input {
  width: 100%;
  padding: 7px 10px 7px 30px;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  font-size: 12px;
  font-family: var(--font-sans);
  background: var(--paper-warm);
  color: var(--ink);
  outline: none;
  transition: border-color 200ms, box-shadow 200ms;
}
.filter-search-input::placeholder { color: var(--metal); }
.filter-search-input:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(14,17,22,0.07);
}

/* Search icon inside input */
.filter-search-wrap::before {
  content: '⌕';
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: var(--metal);
  pointer-events: none;
}

/* Filter group toggle button */
.filter-group-toggle {
  background: none;
  border: none;
  font-size: 11px;
  color: var(--metal);
  cursor: pointer;
  padding: 2px;
  transition: transform 200ms;
}

/* Filter option hidden by search */
.filter-option.is-hidden { display: none; }

/* ============================================================================
   VISTA LISTA (list view toggle)
   ========================================================================= */
.results-grid.view-list {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-3);
}
.results-grid.view-list .card {
  flex-direction: row;
  height: 180px;
}
.results-grid.view-list .card-photo-wrap {
  width: 240px;
  min-width: 240px;
  aspect-ratio: unset;
  border-radius: var(--r-3) 0 0 var(--r-3);
}
.results-grid.view-list .card-body {
  flex: 1;
  padding: var(--s-4) var(--s-5);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  align-content: center;
  gap: 2px var(--s-5);
  overflow: hidden;
}
.results-grid.view-list .card-title-row {
  grid-column: 1;
  flex-direction: row;
  align-items: baseline;
  gap: 8px;
}
.results-grid.view-list .card-meta,
.results-grid.view-list .card-seller-verified,
.results-grid.view-list .card-finance-badge,
.results-grid.view-list .card-detail-line,
.results-grid.view-list .eco-saving-strip {
  grid-column: 1;
}
/* El detalle ampliado (estilo/colores/placa/ubicación) es exclusivo de la
   card horizontal (vista lista) — en la card vertical (grid) se vuelve a
   ocultar, la vertical queda como estaba antes de agregarlo. */
.card-detail-line { display: none; }
.results-grid.view-list .card-detail-line { display: flex; }
/* La card horizontal en mobile ya está muy ajustada de alto (128px) — el
   detalle ampliado se reserva a desktop; en mobile el resto queda a un
   tap de distancia en la ficha técnica. */
@media (max-width: 900px) {
  .results-grid.view-list .card-detail-line { display: none; }
}
.results-grid.view-list .card-price-block,
.results-grid.view-list .card-price-zone {
  grid-column: 2;
  align-self: center;
  margin-top: 0;
  min-width: 150px;
  text-align: right;
}
.results-grid.view-list .card-cuota,
.results-grid.view-list .eco-usd,
.results-grid.view-list .card-eco-detail {
  text-align: right;
}
.results-grid.view-list .results-section-head { border-bottom-color: var(--line); }

/* Resultados de Autos nuevos (solo la card horizontal, ver renderResults):
   marca, modelo, versión, año, tracción, combustible y precio — nada más.
   Fuera quedan la cuota "desde /mes" y el logo de financiamiento. */
.results-grid.view-list .card.is-nuevo-min .card-cuota,
.results-grid.view-list .card.is-nuevo-min .card-finance-badge {
  display: none;
}

/* Card horizontal (vista lista) en DESKTOP: el alto es fijo (180px) y antes
   el precio se anclaba con grid-row:1/-1, pero con filas implícitas de CSS
   Grid ese "-1" colapsa a la fila 1 y el precio quedaba pegado arriba. Se
   saca el bloque de precio del flujo del grid y se centra verticalmente con
   posición absoluta; se reserva espacio a la derecha para que el contenido
   de la izquierda no lo tape. (Mobile usa flex column, no entra acá.) */
@media (min-width: 901px) {
  .results-grid.view-list .card-body {
    position: relative;
    padding-right: 210px;
  }
  .results-grid.view-list .card-price-block,
  .results-grid.view-list .card-price-zone {
    position: absolute;
    top: 50%;
    right: var(--s-5);
    transform: translateY(-50%);
    margin-top: 0;
    min-width: 180px;
  }
}

/* Etiquetas rotativas (Auto nuevo, Poco kilometraje, etc.): franja overlay
   sobre la esquina inferior de la miniatura de foto (240×180px). `.card`
   ya es el ancestro posicionado (position:relative; overflow:hidden), así
   que basta con anclar aquí sin depender de `.card-photo-wrap`. */
.results-grid.view-list .card-promo-strip {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 240px;
  height: 24px;
  z-index: 2;
}

/* ── Vista lista en mobile: layout propio en flexbox, independiente del
   grid de escritorio de arriba. Solo se activa ≤900px. ─────────────── */
@media (max-width: 900px) {
  .results-grid.view-list { gap: var(--s-3); }
  .results-grid.view-list .card {
    flex-direction: row;
    align-items: stretch;
    height: 128px;
  }
  .results-grid.view-list .card-photo-wrap {
    width: 128px;
    min-width: 128px;
    aspect-ratio: 1 / 1;
    border-radius: var(--r-3) 0 0 var(--r-3);
  }
  /* Se ocultan siempre (con o sin datos "extra" como vendedor verificado o
     ahorro eco): así todas las cards muestran el mismo set de campos y
     terminan con el mismo alto, sin depender de cuánta info trae cada una. */
  .results-grid.view-list .card-photos-dots,
  .results-grid.view-list .card-carousel-bar,
  .results-grid.view-list .finance-terms,
  .results-grid.view-list .eco-autonomy,
  .results-grid.view-list .eco-charge,
  .results-grid.view-list .eco-saving-strip,
  .results-grid.view-list .finance-badge-strip,
  .results-grid.view-list .card-seller-verified {
    display: none;
  }
  /* Etiquetas rotativas (garantía, un solo dueño, poco km, etc.): se
     superponen como una franja sobre el borde inferior de la miniatura
     de 128px, en vez de ocupar su propia fila entre foto y cuerpo. */
  .results-grid.view-list .card-promo-strip {
    position: absolute;
    top: 102px;
    left: 0;
    width: 128px;
    height: 26px;
    z-index: 2;
  }
  .results-grid.view-list .card-promo-item {
    justify-content: center;
    text-align: center;
    padding: 0 6px;
    font-size: 8.5px;
    letter-spacing: 0.04em;
  }
  .results-grid.view-list .card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* La regla de escritorio (línea ~4172) fija align-items:center para
       centrar verticalmente la columna izquierda contra el precio en su
       grid de 2 columnas. Ese "center" no se pisa arriba porque acá solo
       cambiamos display/flex-direction, así que se filtra a mobile y —al
       pasar a eje cruzado horizontal en un flex column— termina centrando
       cada línea (marca/modelo, specs, precio) con un ancho distinto,
       generando el desorden. flex-start las alinea todas al mismo borde
       izquierdo. */
    align-items: flex-start;
    gap: 3px;
    padding: var(--s-3);
    overflow: hidden;
  }
  /* Marca + modelo en la misma línea para ahorrar espacio vertical */
  .results-grid.view-list .card-title-row {
    flex-direction: row;
    align-items: baseline;
    flex-wrap: nowrap;
    gap: 6px;
    max-width: 100%;
    overflow: hidden;
  }
  .results-grid.view-list .card-model {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  .results-grid.view-list .card-meta {
    flex-wrap: nowrap;
    overflow: hidden;
    max-width: 100%;
    /* Difumina el borde derecho en vez de cortar el texto en seco cuando
       las specs (año/transmisión/cilindrada/combustible) no caben en una
       sola línea — vehículos con motores grandes (p. ej. "6.2L V8") suelen
       desbordar el ancho angosto de la card en mobile. */
    mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent 100%);
  }
  .results-grid.view-list .card-meta-item {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* La regla de escritorio (línea ~4198) alinea el precio a la derecha para
     la columna derecha del grid de 2 columnas — en mobile todo es una sola
     columna angosta, así que el precio también se justifica a la izquierda
     como el resto de la información. */
  .results-grid.view-list .card-price-block,
  .results-grid.view-list .card-price-zone,
  .results-grid.view-list .card-cuota-primary {
    margin-top: 2px;
    text-align: left;
    align-self: flex-start;
  }
  .results-grid.view-list .card-cuota,
  .results-grid.view-list .eco-usd {
    text-align: left;
  }
  /* El check de "seleccionada para comparar" va en la esquina superior
     derecha de toda la card horizontal, no de la miniatura de foto. */
  .results-grid.view-list .card-select-mark {
    top: var(--s-2);
    right: var(--s-2);
  }
}

/* ============================================================================
   PAGINADOR DE RESULTADOS
   ========================================================================= */
.results-paginator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  margin-top: var(--s-6);
}
.rp-pages {
  display: flex;
  align-items: center;
  gap: 6px;
}
.rp-page,
.rp-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 150ms, background 150ms, color 150ms;
}
.rp-page:hover:not(.is-active),
.rp-nav:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.rp-page.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.rp-nav:disabled { opacity: 0.35; cursor: not-allowed; }

/* ── Vitrina "Vehículos destacados" tras el paginador: siempre en
   cuadrícula clásica, independiente del toggle grid/lista de arriba. ── */
.results-featured-section {
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
}

/* ============================================================================
   ZONA VERDE — hero dedicado (solo vehículos eléctricos)
   ========================================================================= */
.zv-hero {
  background: linear-gradient(135deg, #0f2e22 0%, #143a2b 55%, #0d2419 100%);
  padding: 72px var(--s-6) 56px;
  text-align: center;
}
.zv-hero-content { max-width: 640px; margin: 0 auto; }
.zv-hero-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--eco);
  background: rgba(45, 191, 122, 0.14);
  padding: 5px 14px;
  border-radius: var(--r-pill);
  margin-bottom: var(--s-3);
}
.zv-hero-title {
  font-size: clamp(28px, 4.5vw, 44px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 var(--s-3);
}
.zv-hero-title .accent { color: var(--eco); font-style: normal; font-weight: 800; }
.zv-hero-sub {
  font-size: 15px;
  color: rgba(255,255,255,0.72);
  line-height: 1.5;
  margin: 0 auto;
}

@media (max-width: 640px) {
  .zv-hero { padding: 48px var(--s-4) 36px; }
}

/* Selector de motor — segmentado, de selección única (Todos / Eléctrico /
   Híbrido). Vive dentro del hero de Zona verde, debajo del subtítulo. */
.zv-seg {
  display: inline-flex;
  margin-top: var(--s-5);
  padding: 4px;
  gap: 2px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--r-pill);
}
.zv-seg-btn {
  min-width: 96px;
  padding: 8px 20px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 150ms, color 150ms;
}
.zv-seg-btn:hover { color: #fff; }
.zv-seg-btn.is-active {
  background: #fff;
  color: #0f2e22;
}
.zv-seg-btn:focus-visible { outline: 2px solid var(--eco); outline-offset: 2px; }
@media (max-width: 480px) {
  .zv-seg { width: 100%; }
  .zv-seg-btn { flex: 1; min-width: 0; padding: 8px 10px; }
}

/* ============================================================================
   VISTA "NUEVOS" — hero simple + pastillas de marca
   ========================================================================= */
.condicion-hero {
  text-align: center;
  padding: 56px var(--s-6) 32px;
}
.condicion-hero-title {
  font-size: clamp(28px, 4.5vw, 44px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s-2);
}
.condicion-hero-sub {
  font-size: 15px;
  color: var(--ink-soft);
  margin: 0;
}

.brand-gallery-section {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--s-2) var(--s-6) var(--s-7);
}
.brand-gallery-head {
  text-align: center;
  margin-bottom: var(--s-5);
}
.brand-gallery-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
}
.brand-gallery-sub {
  font-size: 13.5px;
  color: var(--ink-soft);
  margin: 0;
}
.brand-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 10px;
}
.brand-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 8px 12px;
  border-radius: var(--r-3);
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 150ms, background 150ms, color 150ms, transform 150ms, box-shadow 150ms;
}
.brand-tile:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.brand-tile.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.brand-tile.is-active .brand-tile-mono { background: rgba(255, 255, 255, 0.22); color: #fff; }
.brand-tile-mono {
  width: 36px;
  height: 36px;
  border-radius: var(--r-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  background: var(--paper-warm);
  color: var(--ink);
  transition: background 150ms, color 150ms;
}
.brand-tile--all .brand-tile-mono { background: var(--accent); color: #fff; }

/* Placa del logo — los logos de fábrica son monocromos negros, así que van
   sobre blanco. Se mantiene blanca también en :hover y en .is-active: si se
   tiñera con el coral de marca el logo dejaría de leerse. Formato apaisado
   (1.6:1) para que entren tanto los emblemas cuadrados como los wordmarks. */
/* display:block a propósito, no grid/flex: con un track auto el height:100% de
   la imagen queda en dependencia cíclica, el navegador lo resuelve como auto y
   un logo con tamaño intrínseco (el PNG de RAM) se sale de la placa. Con block
   la caja de contenido tiene alto definido y object-fit ya centra solo. */
.brand-tile-plate {
  width: 64px;
  height: 40px;
  border-radius: var(--r-2);
  background: #fff;
  display: block;
  padding: 5px 7px;
  flex-shrink: 0;
}
.brand-tile-plate img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.brand-tile.is-active .brand-tile-plate {
  box-shadow: 0 0 0 2px var(--accent), 0 0 0 3px rgba(255, 255, 255, 0.35);
}

.brand-tile-label {
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
}

/* Slot destino donde se reubica #home-filters-grid en páginas internas
   (Nuevos/Usados) — a diferencia de .filters-mobile-home-slot, aquí NO se
   fuerza una sola columna: estas vistas tienen ancho completo, no un
   sidebar angosto. */
.filters-view-slot { display: block; }

/* ── Alcance "Autos nuevos" ──────────────────────────────────────────────
   El panel de filtros compartido (#home-filters-grid) se reduce a
   Marca/Modelo/Estilo/Combustible/Transmisión/Puertas/Año; el resto de campos
   (Ubicación, Financiamiento, Se recibe, Precio, Kilometraje, Garantía) se
   ocultan.

   El recorte cuelga de la clase .hf-scope-nuevos —que el JS pone sobre el
   propio grid, no sobre el contenedor— para que acompañe al nodo dondequiera
   que se monte: la pantalla de Nuevos, el sidebar de escritorio de los
   resultados que salen de ahí, y el drawer mobile. Así el set de campos es el
   mismo en todos los breakpoints sin duplicar reglas por contenedor.
   En Home/Usados/Premium el mismo nodo conserva todos los campos intactos. */
.hf-scope-nuevos [data-hf-field="ubicacion"],
.hf-scope-nuevos [data-hf-field="financiamiento"],
.hf-scope-nuevos [data-hf-field="serecibe"],
.hf-scope-nuevos [data-hf-field="precio"],
.hf-scope-nuevos [data-hf-field="kilometraje"] {
  display: none;
}
.hf-scope-nuevos [data-hf-row="fuel-trans-location"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hf-scope-nuevos [data-hf-row="doors-financing-tradein"],
.hf-scope-nuevos [data-hf-row="year-price"] { grid-template-columns: minmax(0, 1fr); }

/* Año: en Home/Usados es un rango desde–hasta; en Nuevos se cambia por un
   select de año exacto (No importa + los últimos años). Los dos controles
   viven siempre en el DOM y acá se alterna cuál se ve, porque
   #home-filters-grid es un único nodo que se reubica entre vistas. */
.hf-year-select { display: none; }
.hf-scope-nuevos .hf-year-range { display: none; }
.hf-scope-nuevos .hf-year-select { display: block; }

@media (max-width: 640px) {
  .condicion-hero { padding: 40px var(--s-4) 24px; }
  .brand-gallery-section { padding: 0 var(--s-4) var(--s-5); }
  .brand-gallery { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
  .brand-tile { padding: 12px 6px 10px; }
}

/* ============================================================================
   VISTA "USADOS" — hero sin video; usa el mismo buscador rápido (marca /
   modelo / kilometraje) del home, con "Ver más filtros" bajando a la
   sección de filtros completos que ya vive al pie de esta misma vista.
   ========================================================================= */
.usados-hero {
  background: linear-gradient(135deg, #1f2437 0%, #2a2e45 55%, #1a1d2c 100%);
  padding: 72px var(--s-6) 60px;
  text-align: center;
}
.usados-hero-content { max-width: 820px; margin: 0 auto; }
.usados-hero-title {
  font-size: clamp(28px, 4.5vw, 44px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 var(--s-6);
}
.usados-search-card {
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

@media (max-width: 640px) {
  .usados-hero { padding: 48px var(--s-4) 40px; }
  .usados-condition-pills { flex-direction: column; width: 100%; }
  .u-pill { width: 100%; }
}

/* ============================================================================
   MODAL COMPARADOR
   ========================================================================= */
/* ── Comparador como PÁGINA (vista #view-comparador) ── */
.cmp-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--s-4) var(--s-4) var(--s-7);
}
.cmp-page-header {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-4) var(--s-6) var(--s-5);
  flex-wrap: wrap;
}
.cmp-page-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 150ms;
}
.cmp-page-back:hover { color: var(--accent); }
.cmp-page-back { padding: 0; }
.cmp-page-title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  /* Sin margen y con interlineado ajustado para que la caja del texto no
     sea más alta que el botón "Volver" y quede centrada en la misma línea. */
  margin: 0;
  line-height: 1;
}
.cmp-page-title span { color: var(--accent); font-style: italic; }
/* La barra flotante del comparador se oculta cuando ya estamos en su página */
#view-comparador.is-active ~ .comparator { display: none !important; }

/* Cuerpo del comparador (grid de columnas por auto) — usado dentro de la
   página #view-comparador. */
.cmp-modal-body {
  padding: var(--s-5) var(--s-6);
  display: grid;
  grid-template-columns: repeat(var(--cmp-cols, 3), 1fr);
  gap: var(--s-5);
}

.cmp-col {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.cmp-col-photo {
  position: relative;
  /* El corazón (z-index 2) pertenece a su foto: queda contenido aquí y no
     compite con la barra fija de identidad al hacer scroll. */
  isolation: isolate;
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: var(--r-3);
  overflow: hidden;
  background: var(--paper);
}
.cmp-col-photo img { width: 100%; height: 100%; object-fit: cover; }

.cmp-col-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  background: none;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: border-color 150ms, color 150ms, background 150ms;
}
.cmp-col-cta:hover { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }

/* Sticky identity bar: marca (jerarquía alta) + modelo, fija al hacer scroll */
.cmp-sticky-header {
  grid-column: 1 / -1;
  position: sticky;
  top: var(--header-h);
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(var(--cmp-cols, 3), 1fr);
  gap: var(--s-5);
  margin: 0 calc(var(--s-6) * -1);
  padding: var(--s-3) var(--s-6);
  background: var(--paper-deep);
  border-bottom: 1px solid var(--line);
}
.cmp-sticky-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  position: relative;
  padding-right: 26px;
}
.cmp-sticky-brand {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.1;
}
.cmp-sticky-model {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
}
.cmp-remove-btn {
  position: absolute;
  top: 0; right: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--metal);
  font-size: 11px;
  display: grid;
  place-items: center;
  transition: background 150ms, color 150ms;
}
.cmp-remove-btn:hover { background: var(--accent); color: #fff; }

.cmp-col-price {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--accent);
  line-height: 1;
}
.cmp-col-price small {
  font-size: 14px;
  font-family: var(--font-mono);
  color: var(--metal);
  font-weight: 400;
}

.cmp-divider {
  width: 100%;
  height: 1px;
  background: var(--line);
  margin: var(--s-2) 0;
}

.cmp-row {
  display: contents;
}
.cmp-table {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(var(--cmp-cols, 3), 1fr);
  gap: 0 var(--s-5);
}
.cmp-section-label {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--metal);
  padding: var(--s-4) 0 var(--s-2);
  border-top: 1px solid var(--line);
  margin-top: var(--s-3);
}
.cmp-cell {
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.cmp-cell-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--metal);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 4px;
}
.cmp-cell-val {
  font-weight: 500;
  color: var(--ink);
}
/* Financiamiento disponible: logo del banco (misma píldora que las cards) +
   cuota estimada + aclaración de los supuestos. */
.cmp-fin { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.cmp-fin .card-finance-badge { margin-top: 0; }
.cmp-fin-cuota { font-weight: 700; }
.cmp-fin-note { font-size: 11px; font-weight: 400; color: var(--ink-soft); }

.cmp-features {
  display: flex;
  flex-wrap: wrap;
  /* La celda se estira a la altura de la columna con más equipamiento; sin
     esto, las píldoras de la columna más corta se alargaban para llenarla. */
  align-content: flex-start;
  align-items: flex-start;
  gap: 4px;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line);
}
.cmp-feature-tag {
  line-height: 1.4;
  padding: 3px 8px;
  background: var(--paper);
  border-radius: var(--r-pill);
  font-size: 11px;
  color: var(--ink-soft);
}
.cmp-no-data {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--s-9);
  color: var(--metal);
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.1em;
}

/* ── Comparador (página) en mobile/tablet ─────────────────────────────── */
@media (max-width: 900px) {
  .cmp-page-header { padding: var(--s-3) var(--s-4) var(--s-4); }
  .cmp-page-title { font-size: 18px; }

  /* Body: con máximo 2 autos las columnas se reparten el ancho por igual.
     Es un bloque normal de la página (la ventana hace scroll): NO debe ser
     contenedor de scroll propio, o el sticky de identidad se calcula mal y
     se superpone a las fotos. minmax(0,1fr) evita el desborde horizontal. */
  .cmp-modal-body {
    min-width: 0;
    padding: var(--s-4);
    gap: var(--s-3);
    grid-template-columns: repeat(var(--cmp-cols, 1), minmax(0, 1fr));
  }

  /* Tabla de comparación: mismo gap de columna que el cuerpo y la barra fija
     (var(--s-3)) para que las celdas queden alineadas bajo cada auto. */
  .cmp-table {
    grid-template-columns: repeat(var(--cmp-cols, 1), minmax(0, 1fr));
    gap: 0 var(--s-3);
  }

  /* Sticky identity bar: full-bleed against the mobile body padding */
  .cmp-sticky-header {
    grid-template-columns: repeat(var(--cmp-cols, 1), minmax(0, 1fr));
    gap: var(--s-3);
    margin: 0 calc(var(--s-4) * -1);
    padding: var(--s-2) var(--s-4);
  }
  .cmp-sticky-brand { font-size: 14px; }
  .cmp-sticky-model { font-size: 11px; }

  /* Compact vehicle card */
  .cmp-col-photo { aspect-ratio: 16/9; }
  .cmp-col-price { font-size: 18px; }

  /* Tighter table cells */
  .cmp-cell { padding: var(--s-2) 0; }
  .cmp-cell-label { font-size: 9px; }
  .cmp-cell-val { font-size: 13px; }
  .cmp-section-label { padding: var(--s-3) 0 var(--s-2); margin-top: var(--s-2); font-size: 9px; }

  /* Feature tags */
  .cmp-feature-tag { font-size: 10px; padding: 2px 6px; }

}

/* ============================================================================
   INGRESAR BUTTON + USER CHIP
   ========================================================================= */
.btn-ingresar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  padding: 7px 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  transition: all 200ms var(--ease-out);
  white-space: nowrap;
}
.btn-ingresar:hover {
  background: var(--paper);
  border-color: var(--accent);
  color: var(--accent);
}

/* Language toggle */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: rgba(255,255,255,0.04);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 160ms var(--ease-out);
  min-width: 40px;
  flex-shrink: 0;
}
.lang-toggle:hover {
  border-color: rgba(255,255,255,0.3);
  color: var(--ink);
  background: rgba(255,255,255,0.08);
}
.lang-toggle.is-en {
  border-color: rgba(232,97,78,0.5);
  color: var(--accent);
  background: rgba(232,97,78,0.08);
}

/* ============================================================================
   HAMBURGER + MOBILE NAVIGATION DRAWER
   ========================================================================= */
.hamburger-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px; height: 40px;
  border-radius: var(--r-2);
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 200ms;
}
.hamburger-btn:hover { background: var(--paper-deep); }
.hamburger-btn span {
  display: block;
  width: 22px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 300ms var(--ease-expo), opacity 200ms, width 200ms;
  transform-origin: center;
}
.hamburger-btn.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger-btn.is-open span:nth-child(2) { opacity: 0; width: 0; }
.hamburger-btn.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 60;
  opacity: 0;
  transition: opacity 300ms var(--ease-out);
}
.mobile-nav-overlay.is-open { display: block; opacity: 1; }

.mobile-nav {
  position: fixed;
  top: 0; right: 0;
  width: min(320px, 85vw);
  height: 100%;
  background: var(--paper-deep);
  border-left: 1px solid var(--line-strong);
  z-index: 70;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 320ms var(--ease-expo);
  overflow-y: auto;
}
.mobile-nav.is-open { transform: translateX(0); }

.mobile-nav-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--s-5);
  height: var(--header-h);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.mobile-nav-close {
  width: 40px; height: 40px;
  border-radius: var(--r-2);
  display: grid;
  place-items: center;
  background: transparent;
  cursor: pointer;
  transition: background 200ms;
}
.mobile-nav-close:hover { background: var(--paper-warm); }
.mobile-nav-close svg { width: 20px; height: 20px; }

.mobile-nav-links {
  display: flex;
  flex-direction: column;
  padding: var(--s-3) 0;
  flex: 1;
}
.mobile-nav-links a {
  display: flex;
  align-items: center;
  padding: 14px var(--s-5);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-soft);
  border-left: 3px solid transparent;
  transition: color 200ms, background 200ms, border-color 200ms;
}
.mobile-nav-links a:hover {
  color: var(--ink);
  background: rgba(255,255,255,0.04);
}
.mobile-nav-links a.is-active {
  color: var(--ink);
  border-left-color: var(--accent);
  background: rgba(232, 97, 78, 0.06);
}

/* Submenú "Autos usados" — acordeón dentro del drawer mobile */
.mnav-group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px var(--s-5);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-soft);
  background: none;
  border: none;
  border-left: 3px solid transparent;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: color 200ms, background 200ms;
}
.mnav-group-toggle:hover { color: var(--ink); background: rgba(255,255,255,0.04); }
.mnav-chevron { transition: transform 250ms var(--ease-expo); flex-shrink: 0; }
.mnav-group-toggle[aria-expanded="true"] { color: var(--ink); }
.mnav-group-toggle[aria-expanded="true"] .mnav-chevron { transform: rotate(180deg); }

.mnav-submenu {
  display: flex;
  flex-direction: column;
  max-height: 0;
  overflow: hidden;
  transition: max-height 280ms var(--ease-expo);
  background: rgba(0,0,0,0.16);
}
.mnav-submenu.is-open { max-height: 360px; }
.mnav-submenu a {
  padding: 12px var(--s-5) 12px calc(var(--s-5) + 14px);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  border-left: 3px solid transparent;
  transition: color 200ms, background 200ms, border-color 200ms;
}
.mnav-submenu a:hover {
  color: var(--ink);
  background: rgba(255,255,255,0.05);
}

/* CTAs prominentes — Anuncie su auto / Edite su anuncio */
.mnav-cta-group {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: 0 var(--s-5) var(--s-3);
}
.mnav-cta-primary,
.mnav-cta-secondary {
  padding: 13px var(--s-5);
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
  cursor: pointer;
  transition: background 200ms, color 200ms, border-color 200ms, transform 200ms var(--ease-out);
  font-family: var(--font-sans);
}
.mnav-cta-primary {
  background: var(--accent);
  color: #fff;
  border: none;
}
.mnav-cta-primary:hover { background: var(--accent-deep); transform: translateY(-1px); }
.mnav-cta-secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-strong);
}
.mnav-cta-secondary:hover { border-color: var(--ink-soft); background: var(--paper-warm); }

.mobile-nav-footer {
  padding: var(--s-5);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  flex-shrink: 0;
  padding-bottom: max(var(--s-5), env(safe-area-inset-bottom));
}
.mobile-nav-footer-row {
  display: flex;
  gap: var(--s-3);
  align-items: center;
}
/* CTA principal del footer del drawer: "Anuncie su auto" (coral) */
.btn-anuncie-mobile {
  display: block;
  width: 100%;
  padding: 13px var(--s-4);
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  border-radius: var(--r-pill);
  transition: background 180ms;
}
.btn-anuncie-mobile:hover,
.btn-anuncie-mobile:active { background: var(--accent-deep); }
.btn-ingresar-mobile {
  flex: 1;
  padding: 10px var(--s-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  transition: border-color 200ms, color 200ms, background 200ms;
}
.btn-ingresar-mobile:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(232,97,78,0.06);
}
.lang-toggle-mobile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 var(--s-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  background: transparent;
  cursor: pointer;
  transition: all 200ms;
}
.lang-toggle-mobile:hover { border-color: rgba(255,255,255,0.3); color: var(--ink); }
.lang-toggle-mobile.is-en { border-color: rgba(232,97,78,0.5); color: var(--accent); background: rgba(232,97,78,0.08); }

.user-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 5px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  cursor: pointer;
  transition: all 200ms var(--ease-out);
  user-select: none;
}
.user-chip:hover,
.user-chip.is-open { background: var(--paper); }
.user-chip-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}
.user-chip > span {
  font-size: 14px;
  font-weight: 500;
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-chip > svg { transition: transform 200ms var(--ease-out); }
.user-chip.is-open > svg { transform: rotate(180deg); }

.user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-lg);
  min-width: 180px;
  padding: 6px;
  display: none;
  z-index: 100;
  animation: chipIn 200ms var(--ease-expo);
}
.user-chip.is-open .user-dropdown { display: block; }

/* En mobile el chip de usuario ya no es el elemento más a la derecha del
   header (el hamburger-btn va después) — anclar el dropdown al chip con
   right:0 lo dejaba corto del borde derecho real. Se fija al viewport
   para que abra pegado al mismo lado que el hamburger/X. */
@media (max-width: 900px) {
  .user-dropdown {
    position: fixed;
    top: calc(var(--header-h) + var(--s-2));
    right: var(--s-6);
    left: auto;
  }
}
@media (max-width: 540px) {
  .user-dropdown {
    top: calc(60px + var(--s-2));
    right: var(--s-4);
  }
}
.user-dd-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--r-2);
  font-size: 14px;
  font-weight: 500;
  transition: background 150ms;
}
.user-dd-item:hover { background: var(--paper-warm); }
.user-dd-item svg { flex-shrink: 0; opacity: 0.75; }
.user-dd-sep { border-top: 1px solid var(--line); margin: 6px 0; }
.user-dd-logout { color: var(--accent); }

/* ============================================================================
   SHARED FORM ELEMENTS (auth + sell)
   ========================================================================= */
.field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field-group[hidden] { display: none; }
.field-group label:not(.sell-radio-card):not(.sell-condition-card):not(.sell-feature-check):not(.sell-checkbox-card):not(.sell-equipment-label) {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
}
.field-group input,
.field-group textarea {
  background: var(--paper-warm);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  padding: 10px 14px;
  font-size: 14px;
  color: var(--ink);
  outline: none;
  transition: border-color 200ms;
  width: 100%;
}
.field-group select {
  background: var(--paper-warm);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  padding: 10px 36px 10px 14px;
  font-size: 14px;
  color: var(--ink);
  outline: none;
  transition: border-color 200ms;
  width: 100%;
  /* El texto nunca debe quedar por debajo de la flecha: si no cabe, se corta
     con puntos suspensivos en lugar de meterse bajo el ícono. */
  min-width: 0;
  text-overflow: ellipsis;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9' fill='none' stroke='%236E7898' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
}
.field-group input:focus,
.field-group select:focus,
.field-group textarea:focus { border-color: var(--accent); }
.field-group input.is-error,
.field-group select.is-error,
.field-group textarea.is-error { border-color: #E84E4E; }
.field-group textarea { resize: vertical; }

.field-error {
  font-size: 12px;
  color: #E84E4E;
  display: none;
}
.field-error.is-visible { display: block; }

.field-helper {
  font-size: 11px;
  color: var(--ink-soft);
  margin: 3px 0 0;
  line-height: 1.35;
}

.field-password {
  position: relative;
}
.field-password input { padding-right: 44px; }
.toggle-pass {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--metal);
  transition: color 200ms;
}
.toggle-pass:hover { color: var(--ink); }
.toggle-pass svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}

/* Filas de formulario. Se reparten por el ancho DEL CONTENEDOR, no del
   viewport: la pasarela de pago mete su formulario en una columna de ~368px
   junto al resumen, y ahí dos columnas dejaban campos de 152px donde el
   selector de "Tipo de documento" se cortaba. Un media query por viewport no
   podía verlo —la pantalla es ancha, la caja no—, así que el reparto lo decide
   auto-fit. El min() evita desbordes si el contenedor es más angosto que el
   mínimo. */
.field-row-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: var(--s-4);
}
.field-row-2[hidden] { display: none; }
.field-row-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
  gap: var(--s-4);
}
.field-row-3[hidden] { display: none; }

.field-with-unit {
  position: relative;
}
.field-unit-prefix {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--metal);
  z-index: 1;
}
.field-unit-prefix + input { padding-left: 28px; }
.field-unit {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--metal);
}
.field-with-unit input { padding-right: 44px; }

.sell-km-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  min-height: 22px;
}
/* "Color" y "Puertas" comparten fila con "Kilometraje" (.field-row-3), cuya
   etiqueta es más alta por el toggle km/mi — sin esto sus selects quedaban
   unos px más arriba que el input de kilometraje, se veían desalineados. */
.field-row-3 .field-group > label { display: flex; align-items: center; min-height: 22px; }
.sell-km-toggle {
  display: flex;
  gap: 6px;
}
/* km / mi como checkboxes mutuamente excluyentes (solo uno activo) */
.sell-unit-check {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border: 1px solid var(--line-strong);
  border-radius: 99px;
  background: transparent;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--metal);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.sell-unit-check input {
  accent-color: var(--accent);
  width: 13px; height: 13px;
  margin: 0;
  cursor: pointer;
  flex-shrink: 0;
}
.sell-unit-check:hover { border-color: rgba(255,255,255,0.25); }
.sell-unit-check:has(input:checked) {
  background: rgba(232,97,78,0.10);
  border-color: var(--accent);
  color: var(--accent);
}

.price-usd-preview {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--metal);
  min-height: 16px;
}
.field-char-count {
  font-size: 12px;
  color: var(--metal);
  text-align: right;
}

/* ============================================================================
   TERMS & CONDITIONS MODAL
   ========================================================================= */
.terms-modal {
  position: relative;
  background: var(--paper-deep);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-4);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 400px;
  padding: var(--s-7) var(--s-6) var(--s-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-5);
  animation: termsIn 320ms var(--ease-expo) both;
}
@keyframes termsIn {
  from { opacity: 0; transform: scale(0.94) translateY(12px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);    }
}

.terms-modal-icon {
  width: 60px; height: 60px;
  border-radius: var(--r-3);
  background: rgba(232, 97, 78, 0.1);
  border: 1px solid rgba(232, 97, 78, 0.2);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.terms-modal-icon svg {
  width: 28px; height: 28px;
  stroke: var(--accent);
}

.terms-modal-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.terms-modal-body {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 320px;
}

.terms-checkbox-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  cursor: pointer;
  padding: var(--s-4) var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  width: 100%;
  text-align: left;
  transition: border-color 200ms, background 200ms;
}
.terms-checkbox-row:hover { border-color: var(--line-strong); background: rgba(255,255,255,0.02); }

.terms-checkbox-box {
  position: relative;
  width: 20px; height: 20px;
  border: 2px solid var(--metal);
  border-radius: 5px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  transition: border-color 200ms, background 200ms;
}
.terms-checkbox-box input[type="checkbox"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%; height: 100%;
  margin: 0;
}
.terms-check-icon {
  width: 12px; height: 10px;
  color: var(--paper-deep);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 180ms, transform 180ms var(--ease-expo);
  pointer-events: none;
}
.terms-checkbox-box:has(input:checked) {
  background: var(--accent);
  border-color: var(--accent);
}
.terms-checkbox-box:has(input:checked) .terms-check-icon {
  opacity: 1;
  transform: scale(1);
}
.terms-checkbox-row:has(input:checked) {
  border-color: rgba(232, 97, 78, 0.4);
  background: rgba(232, 97, 78, 0.04);
}

.terms-checkbox-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  transition: color 200ms;
}
.terms-checkbox-row:has(input:checked) .terms-checkbox-label { color: var(--ink); }

.terms-continue-btn {
  width: 100%;
  padding: 13px var(--s-5);
  background: var(--accent);
  color: #fff;
  border-radius: var(--r-pill);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 200ms, transform 200ms var(--ease-out), opacity 200ms;
}
.terms-continue-btn:hover:not(:disabled) { background: var(--accent-deep); transform: translateY(-1px); }
.terms-continue-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  transform: none;
}

/* ============================================================================
   WALLET PAGE — agregar fondos (pre-pago, solo vendedor registrado)
   ========================================================================= */
.wallet-page {
  background: var(--paper-deep);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-4);
  box-shadow: var(--shadow-md);
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding: var(--s-7) var(--s-6) var(--s-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-4);
}

.wallet-page-icon {
  width: 56px; height: 56px;
  border-radius: var(--r-3);
  background: rgba(39, 194, 128, 0.1);
  border: 1px solid rgba(39, 194, 128, 0.25);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.wallet-page-icon svg { width: 26px; height: 26px; stroke: var(--verified); }

.wallet-page-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin: 0;
}
/* La bajada va pegada a su título, no a la distancia del gap del contenedor
   (s-4). Se descuenta hasta s-2 con valores de la escala, sin números sueltos. */
.wallet-page-sub {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: calc(var(--s-2) - var(--s-4));
}

.wallet-promo-banner {
  width: 100%;
  text-align: left;
  background: linear-gradient(135deg, rgba(232, 97, 78, 0.12), rgba(232, 97, 78, 0.04));
  border: 1px solid rgba(232, 97, 78, 0.3);
  border-radius: var(--r-3);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.wallet-promo-tag {
  display: inline-flex;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent);
  padding: 3px var(--s-2);
  border-radius: var(--r-pill);
}
.wallet-promo-banner p {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.5;
  margin: 0;
}
.wallet-promo-banner strong { color: var(--accent); }

.wallet-notice {
  width: 100%;
  text-align: left;
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0;
}
.wallet-notice strong { color: var(--ink); }
.wallet-notice--muted { color: var(--metal); font-size: 12px; }

.wallet-field { width: 100%; text-align: left; display: flex; flex-direction: column; gap: var(--s-2); }
.wallet-field-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.wallet-amount-select {
  width: 100%;
  padding: var(--s-3) 36px var(--s-3) var(--s-4);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font-mono);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9' fill='none' stroke='%236E7898' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  transition: border-color 200ms;
}
.wallet-amount-select:hover { border-color: var(--ink-soft); }

.wallet-breakdown {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: var(--s-4);
}
.wallet-breakdown-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  font-size: 13px;
  color: var(--ink-soft);
}
.wallet-breakdown-row strong {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.wallet-breakdown-row.is-bonus strong { color: var(--verified); }
.wallet-breakdown-row.is-credit { font-weight: 600; }
.wallet-breakdown-row.is-credit strong { font-size: 16px; color: var(--ink); }
.wallet-breakdown-sep { border-top: 1px dashed var(--line-strong); margin: var(--s-1) 0; }
.wallet-breakdown-row.is-pay { font-weight: 700; }
.wallet-breakdown-row.is-pay strong { font-size: 17px; color: var(--accent); }

.wallet-pay-btn {
  width: 100%;
  padding: var(--s-3) var(--s-5);
  background: var(--accent);
  color: #fff;
  border-radius: var(--r-pill);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 200ms, transform 200ms var(--ease-out);
}
.wallet-pay-btn:hover { background: var(--accent-deep); transform: translateY(-1px); }

/* Acciones de la recarga: pagar es la acción principal, "Volver" la salida. */
.wallet-recharge-actions {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.wallet-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  width: 100%;
  padding: var(--s-3) var(--s-5);
  background: none;
  color: var(--ink-soft);
  border: 0;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: color 200ms;
}
.wallet-back-btn:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================================
   AUTH MODAL
   ========================================================================= */
.auth-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(4px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 250ms var(--ease-out);
}
.auth-overlay.is-open {
  opacity: 1;
  pointer-events: all;
}
.auth-modal {
  background: var(--paper-deep);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-4);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 440px;
  position: relative;
  max-height: 92vh;
  overflow-y: auto;
  transform: scale(0.96) translateY(8px);
  transition: transform 300ms var(--ease-expo);
}
.auth-overlay.is-open .auth-modal { transform: scale(1) translateY(0); }

.auth-close {
  position: absolute;
  top: var(--s-4);
  right: var(--s-4);
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--paper-warm);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--metal);
  transition: all 200ms;
  z-index: 1;
}
.auth-close:hover { background: var(--paper); color: var(--ink); }

.auth-view { padding: var(--s-7) var(--s-6) var(--s-6); }
.auth-view.hidden { display: none; }

.auth-logo {
  text-transform: lowercase;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.04em;
  margin-bottom: var(--s-5);
}
.auth-logo span { color: var(--accent); }

.auth-title {
  font-family: var(--font-display);
  font-size: 24px; font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.auth-sub {
  font-size: 14px;
  color: var(--ink-soft);
  margin-bottom: var(--s-5);
  line-height: 1.5;
}
.auth-icon {
  width: 48px; height: 48px;
  border-radius: var(--r-3);
  background: var(--paper-warm);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--s-4);
}
.auth-icon svg {
  width: 24px; height: 24px;
  fill: none; stroke: var(--accent);
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}

/* Modales de mensaje (favoritos, alertas, recuperar acceso, reporte, código):
   el bloque de cabecera —ícono, título y texto— va centrado, igual que las
   demás modales de confirmación del sitio (.sell-confirm-modal). Los
   formularios de ingreso y registro no llevan ícono y siguen alineados a la
   izquierda; las etiquetas y campos de abajo tampoco cambian. */
.auth-view:has(> .auth-icon) .auth-icon { margin-inline: auto; }
.auth-view:has(> .auth-icon) .auth-logo { text-align: center; }
.auth-view:has(> .auth-icon) .auth-title,
.auth-view:has(> .auth-icon) .auth-sub { text-align: center; }

.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.auth-links-row {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-top: -6px;
}
.auth-link {
  font-size: 13px;
  color: var(--finance);
  font-weight: 500;
  transition: opacity 200ms;
}
.auth-link:hover { opacity: 0.7; }

.otp-resend-row {
  margin-top: var(--s-4);
  text-align: center;
  font-size: 13px;
  color: var(--ink-soft);
}
.otp-resend-row .auth-link {
  background: none;
  border: none;
  padding: 0;
  margin-left: 2px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.otp-resend-row .auth-link:disabled {
  color: var(--metal);
  opacity: 0.6;
  cursor: not-allowed;
}
.otp-resend-row .auth-link:disabled:hover { opacity: 0.6; }

.btn-auth-primary {
  background: var(--accent);
  color: white;
  font-size: 15px; font-weight: 600;
  padding: 12px 20px;
  border-radius: var(--r-2);
  text-align: center;
  transition: all 200ms var(--ease-out);
  border: none; cursor: pointer;
  width: 100%;
}
.btn-auth-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  filter: none;
}
.btn-auth-primary:hover:not(:disabled) {
  background: var(--accent-deep);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(232,97,78,0.35);
}
.btn-auth-secondary {
  background: var(--paper);
  color: var(--ink);
  font-size: 14px; font-weight: 500;
  padding: 11px 20px;
  border-radius: var(--r-2);
  text-align: center;
  transition: all 200ms;
  border: 1px solid var(--line-strong);
  cursor: pointer; width: 100%;
}
.btn-auth-secondary:hover { background: var(--paper-warm); }
.btn-auth-ghost {
  background: transparent;
  color: var(--ink-soft);
  font-size: 14px; font-weight: 500;
  padding: 10px 20px;
  border-radius: var(--r-2);
  text-align: center;
  transition: all 200ms;
  border: none; cursor: pointer; width: 100%;
}
.btn-auth-ghost:hover { color: var(--ink); background: var(--paper-warm); }

.auth-divider {
  display: flex; align-items: center; gap: var(--s-3);
  color: var(--metal); font-size: 12px;
}
.auth-divider::before,
.auth-divider::after { content:''; flex:1; height:1px; background:var(--line); }

.auth-terms {
  font-size: 12px; color: var(--metal); line-height: 1.5;
}
.auth-terms a { color: var(--finance); text-decoration: underline; }

/* Editar anuncio modal extras */
.ea-helper {
  display: flex;
  gap: var(--s-2);
  align-items: flex-start;
  background: rgba(91, 156, 246, 0.08);
  border: 1px solid rgba(91, 156, 246, 0.2);
  border-radius: var(--r-2);
  padding: var(--s-3) var(--s-3);
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.ea-helper svg {
  width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px;
  fill: none; stroke: var(--finance); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.ea-registered { display: flex; flex-direction: column; gap: var(--s-2); }
.ea-registered-label {
  text-align: center;
  font-size: 13px;
  color: var(--metal);
}

.auth-success { text-align: center; padding: var(--s-5) 0; }
.auth-success.hidden { display: none; }
.auth-success-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(39,194,128,0.12);
  color: var(--verified);
  font-size: 24px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--s-4);
  border: 1px solid var(--verified);
}
.auth-success p {
  font-size: 14px; color: var(--ink-soft);
  line-height: 1.6; margin-bottom: var(--s-5);
}

/* ============================================================================
   SELL WIZARD
   ========================================================================= */
/* SELL PAGE — full-page view */
#view-vender {
  background: var(--paper-deep);
  min-height: 100vh;
}

.sell-page {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 var(--s-5) var(--s-9);
  display: flex;
  flex-direction: column;
}

/* Sell page back button */
.sell-page-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--ink-soft);
  text-decoration: none;
  padding: var(--s-3) 0;
  transition: color 150ms;
}
.sell-page-back:hover { color: var(--ink); }

.reg-breadcrumb-header {
  justify-content: flex-start !important;
  gap: 6px;
  padding: 9px max(var(--s-6), calc((100% - var(--max-w)) / 2 + var(--s-6))) !important;
}
.reg-breadcrumb-header .sell-page-back {
  font-size: 13px;
  padding: 0;
  gap: 4px;
}
.reg-crumb-sep {
  font-size: 13px;
  color: var(--metal);
  opacity: 0.35;
  line-height: 1;
  user-select: none;
}
.reg-crumb-current {
  font-size: 12px;
  font-weight: 500;
  color: var(--metal);
  font-family: var(--font-sans);
  letter-spacing: 0.01em;
}

.sell-header-spacer { width: 120px; }

.sell-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-4) max(var(--s-6), calc((100% - var(--max-w)) / 2 + var(--s-6)));
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  background: var(--paper-deep);
  z-index: 10;
}
.sell-logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.03em;
}
.sell-logo span:first-child { color: var(--accent); }
.sell-header-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--metal);
  font-family: var(--font-sans);
  letter-spacing: 0;
}
.sell-close {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--paper-warm);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--metal);
  transition: all 200ms;
}
.sell-close:hover { background: var(--paper); color: var(--ink); }

/* Step indicator */
.sell-steps {
  display: flex;
  align-items: center;
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--line);
  gap: 4px;
  overflow-x: auto;
  flex-shrink: 0;
  scrollbar-width: none;
}
.sell-steps::-webkit-scrollbar { display: none; }
.sell-step {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  flex-shrink: 0;
}
.sell-step-num {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid var(--paper-warm);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
  color: var(--metal);
  transition: all 200ms;
  background: var(--paper-deep);
}
.sell-step-label {
  font-size: 11px; color: var(--metal);
  white-space: nowrap; font-weight: 500;
  transition: color 200ms;
}
.sell-step.is-active .sell-step-num { border-color: var(--accent); background: var(--accent); color: white; }
.sell-step.is-active .sell-step-label { color: var(--ink); }
.sell-step.is-done .sell-step-num { border-color: var(--verified); background: var(--verified); color: white; }
.sell-step.is-done .sell-step-label { color: var(--verified); }
/* Los pasos ya completados son clicables para volver directo a ellos */
.sell-step.is-done { cursor: pointer; }
.sell-step.is-done .sell-step-num:hover { transform: scale(1.12); }
.sell-step-num { transition: transform 150ms; }
.sell-step-line {
  flex: 1; height: 2px;
  background: var(--line-strong);
  margin-bottom: 15px; min-width: 16px;
  transition: background 200ms;
}
.sell-step-line.is-done { background: var(--verified); }

/* Mobile step indicator (hidden on desktop, shown via media query) */
.sell-step-mobile {
  display: none;
  padding: var(--s-3) 0 var(--s-4);
  border-bottom: 1px solid var(--line);
}
.sell-step-mobile-text {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.sell-step-mobile-num {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
}
.sell-step-mobile-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--metal);
}
.sell-step-mobile-bar {
  height: 4px;
  background: var(--line-strong);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.sell-step-mobile-fill {
  height: 100%;
  background: var(--accent);
  border-radius: var(--r-pill);
  transition: width 350ms ease;
}

/* Sell body */
.sell-body {
  padding: var(--s-6) 0;
  flex: 1;
}
.sell-panel { display: none; }
.sell-panel.is-active { display: block; animation: viewIn 350ms var(--ease-expo); }

.sell-panel-title {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 700;
  letter-spacing: -0.02em; margin-bottom: 4px;
}
.sell-panel-sub {
  font-size: 14px; color: var(--ink-soft); margin-bottom: var(--s-5);
}
.sell-form {
  display: flex; flex-direction: column; gap: var(--s-6);
}

/* Sell select */
.sell-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9' fill='none' stroke='%236E7898' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 36px !important;
  cursor: pointer;
}

/* Radio card */
.sell-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.sell-radio-card { cursor: pointer; }
.sell-radio-card input[type="radio"] { display: none; }
.sell-radio-card > span {
  display: flex; flex-direction: column;
  padding: 8px 14px;
  border-radius: var(--r-2);
  border: 1px solid var(--line-strong);
  font-size: 13px; font-weight: 500;
  color: var(--ink-soft);
  transition: all 200ms;
  white-space: nowrap;
  background: var(--paper-warm);
  gap: 2px;
}
.sell-radio-card input:checked + span {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(232,97,78,0.1);
}
.sell-radio-card span small {
  font-size: 11px; color: var(--metal); font-weight: 400;
}
.sell-radio-card input:checked + span small { color: rgba(232,97,78,0.7); }
.sell-seller-type-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}

/* Registration seller profile cards */
.reg-profile-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}
.reg-profile-card { cursor: pointer; }
.reg-profile-card input[type="radio"] { display: none; }
.reg-profile-card > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-3);
  border-radius: var(--r-3);
  border: 1.5px solid var(--line-strong);
  text-align: center;
  background: var(--paper-warm);
  transition: all 200ms;
}
.reg-profile-card:hover > span { border-color: var(--line); }
.reg-profile-card input:checked + span {
  border-color: var(--accent);
  background: rgba(232, 97, 78, 0.08);
}
.reg-profile-card > span svg {
  width: 34px; height: 34px;
  fill: none;
  stroke: var(--metal);
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  transition: stroke 200ms;
}
.reg-profile-card input:checked + span svg { stroke: var(--accent); }
.reg-profile-card > span strong {
  font-size: 13px; font-weight: 600; color: var(--ink);
  transition: color 200ms;
}
.reg-profile-card input:checked + span strong { color: var(--accent); }
.reg-profile-card > span small {
  font-size: 11px; color: var(--metal); font-weight: 400; line-height: 1.4;
}

/* ============================================================================
   REGISTRO — FORMULARIO (secciones compartidas entre página y modal)
   ========================================================================= */

/* Required asterisk */
.req { color: var(--accent); font-size: 12px; }

/* Short fields */
.field-short { max-width: 140px !important; }

/* ==========================================================================
   DOB CALENDAR PICKER
   ========================================================================= */
.dob-calendar { position: relative; }

.dob-input-wrap {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  padding: 10px var(--s-4);
  background: var(--paper-deep);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-3);
  transition: border-color 180ms;
}
.dob-input-wrap:focus-within,
.dob-input-wrap:hover { border-color: var(--accent); }
.dob-input-icon { flex-shrink: 0; color: var(--ink-soft); }
.dob-input {
  flex: 1;
  min-width: 0;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  font-size: 15px;
  color: var(--ink);
  outline: none;
  width: auto !important;
  letter-spacing: 0.02em;
}
.dob-input::placeholder { color: var(--ink-soft); letter-spacing: normal; }
.dob-toggle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  background: transparent;
  border: none;
  color: var(--ink-soft);
  cursor: pointer;
}
.dob-toggle > svg { transition: transform 180ms; }
.dob-toggle[aria-expanded="true"] > svg { transform: rotate(180deg); }

.dob-picker {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 200;
  background: var(--paper);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-4);
  box-shadow: 0 16px 40px rgba(0,0,0,0.35);
  padding: var(--s-4);
  width: 288px;
  animation: fadeUp 160ms var(--ease-out) both;
}

.dob-picker-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s-4);
}
.dob-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: var(--r-2);
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background 150ms;
}
.dob-nav-btn:hover:not(:disabled) { background: var(--paper-deep); }
.dob-nav-btn:disabled { opacity: 0.28; cursor: not-allowed; }
.dob-nav-label {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  background: transparent;
  border: none;
  color: var(--ink);
  cursor: pointer;
  padding: 5px 12px;
  border-radius: var(--r-2);
  transition: background 150ms;
}
.dob-nav-label:hover { background: var(--paper-deep); }

.dob-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: var(--s-1);
}
.dob-weekdays span {
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  padding: 3px 0 5px;
}

.dob-days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.dob-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  border-radius: var(--r-2);
  border: none;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background 120ms;
}
.dob-day:hover:not(:disabled):not(.dob-day--selected) { background: var(--paper-deep); }
.dob-day--selected {
  background: var(--accent);
  color: #fff;
  font-weight: 700;
}
.dob-day--disabled { color: var(--ink-soft); opacity: 0.35; cursor: not-allowed; }
.dob-day--empty    { pointer-events: none; }

/* Rejilla de meses / años (drill-down año → mes → día) */
.dob-months-grid,
.dob-years-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.dob-cell {
  padding: 12px 4px;
  border-radius: var(--r-2);
  border: none;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  cursor: pointer;
  transition: background 120ms;
}
.dob-cell:hover:not(:disabled):not(.dob-cell--selected) { background: var(--paper-deep); }
.dob-cell--selected { background: var(--accent); color: #fff; font-weight: 700; }
.dob-cell--disabled { color: var(--ink-soft); opacity: 0.35; cursor: not-allowed; }

/* Visibilidad por modo del picker */
.dob-months-grid,
.dob-years-grid { display: none; }
.dob-picker[data-mode="months"] .dob-months-grid,
.dob-picker[data-mode="years"]  .dob-years-grid { display: grid; }
.dob-picker[data-mode="months"] .dob-days-grid,
.dob-picker[data-mode="months"] .dob-weekdays,
.dob-picker[data-mode="years"]  .dob-days-grid,
.dob-picker[data-mode="years"]  .dob-weekdays { display: none; }

/* ── Section blocks ── */
.reg-section {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--line);
}
.reg-section--last {
  border-bottom: none;
  padding-bottom: 0;
}

.reg-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.reg-section-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--font-mono);
}
.reg-section-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  font-family: var(--font-mono);
}

/* ── Password strength bar ── */
.pass-strength {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: 6px;
}
.pass-strength-bar {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--line-strong);
  overflow: hidden;
}
.pass-strength-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 2px;
  transition: width 300ms, background 300ms;
}
.pass-strength-fill.invalid { width: 45%; background: #E84E4E; }
.pass-strength-fill.valid   { width: 100%; background: var(--verified); }
.pass-strength-label {
  font-size: 11px;
  color: var(--metal);
  white-space: nowrap;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  min-width: 60px;
}
.pass-strength-label.is-valid   { color: var(--verified); }
.pass-strength-label.is-invalid { color: #E84E4E; }

/* Texto de "qué falta" debajo de la barra */
.pass-hint {
  font-size: 11px;
  color: var(--amber);
  margin: 6px 0 0;
  line-height: 1.4;
  display: none;
}
.pass-hint.is-visible { display: block; }

/* ── Teléfono: indicativo de país + segundo número + WhatsApp ── */
.phone-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.phone-row[hidden] { display: none; }
.phone-row-2 { margin-top: 10px; }
.phone-input {
  flex: 1 1 140px;
  min-width: 120px;
  width: auto !important;
}
.phone-wa {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  font-size: 13px !important;
  font-weight: 500;
  color: var(--ink-soft) !important;
  cursor: pointer;
  white-space: nowrap;
  padding: 8px 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  background: var(--paper-warm);
  transition: border-color 200ms, color 200ms, background 200ms;
}
.phone-wa input {
  width: 15px !important;
  height: 15px !important;
  padding: 0 !important;
  margin: 0;
  min-width: 0;
  accent-color: #25D366;
  flex: none;
}
.phone-wa:has(input:checked) {
  border-color: #25D366;
  color: #25D366 !important;
  background: color-mix(in srgb, #25D366 12%, transparent);
}
.phone-remove {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 40px;
  border-radius: var(--r-2);
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color 200ms, color 200ms;
}
.phone-remove:hover { border-color: #E84E4E; color: #E84E4E; }
.phone-add-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 7px 13px;
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  background: transparent;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-2);
  cursor: pointer;
  transition: border-color 200ms, background 200ms;
}
.phone-add-btn:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }

/* Dropdown de indicativo */
.cc-select { position: relative; flex: none; }
.cc-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 10px;
  background: var(--paper-warm);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  color: var(--ink);
  font-size: 14px;
  cursor: pointer;
  transition: border-color 200ms;
  white-space: nowrap;
}
.cc-select.is-open .cc-trigger,
.cc-trigger:hover { border-color: var(--accent); }
.cc-flag {
  display: inline-flex;
  width: 22px;
  height: 15px;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--line);
  flex: none;
}
.cc-flag-svg { display: block; width: 100%; height: 100%; }
.cc-trigger .cc-dial { font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; }
.cc-caret { flex: none; color: var(--ink-soft); transition: transform 200ms; }
.cc-select.is-open .cc-caret { transform: rotate(180deg); }
.cc-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  width: 260px;
  max-width: 78vw;
  background: var(--bg-body);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  display: none;
}
.cc-select.is-open .cc-menu { display: block; }
.cc-search { margin-bottom: 6px; }
.cc-search-input {
  width: 100%;
  font-size: 13px;
  color: var(--ink);
  background: var(--paper-warm);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  outline: none;
}
.cc-search-input:focus { border-color: var(--accent); }
.cc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 240px;
  overflow-y: auto;
}
.cc-option {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border-radius: var(--r-2);
  cursor: pointer;
  font-size: 13px;
  color: var(--ink);
}
.cc-option:hover { background: var(--line); }
.cc-option.is-selected { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.cc-option .cc-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-option .cc-dial { color: var(--ink-soft); font-variant-numeric: tabular-nums; flex: none; }

/* Insignia WhatsApp en la vista previa */
.sell-review-wa {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  background: #25D366;
  border-radius: 4px;
  padding: 1px 6px;
  vertical-align: middle;
}

/* ── Sex radio buttons ── */
.reg-sex-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: 4px;
}
.reg-sex-option {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.reg-sex-option input[type="radio"] { display: none; }
.reg-sex-option span {
  padding: 6px 14px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--line-strong);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  background: var(--paper-warm);
  transition: all 180ms;
  cursor: pointer;
}
.reg-sex-option input:checked + span {
  border-color: var(--accent);
  background: rgba(232,97,78,0.1);
  color: var(--accent);
  font-weight: 600;
}
.reg-sex-option:hover span {
  border-color: var(--line);
  color: var(--ink);
}

/* ── Checkbox cards (terms/consent) ── */
.reg-check-card {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-2);
  border: 1px solid var(--line);
  background: var(--paper-warm);
  cursor: pointer;
  transition: border-color 150ms;
  margin-bottom: var(--s-2);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.reg-check-card:hover { border-color: var(--line-strong); }
.reg-check-card input[type="checkbox"] {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--accent);
}
.reg-check-card a { color: var(--finance); text-decoration: underline; }
.reg-check-card:has(input:checked) {
  border-color: rgba(232,97,78,0.4);
  background: rgba(232,97,78,0.05);
}

/* ── Captcha ── */
.reg-captcha {
  margin-top: var(--s-4);
  padding: var(--s-4);
  border-radius: var(--r-3);
  border: 1px dashed var(--line-strong);
  background: var(--paper-warm);
}
.reg-captcha-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--metal);
  font-family: var(--font-mono);
  margin-bottom: var(--s-3);
}
.reg-captcha-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.reg-captcha-question {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.06em;
  background: var(--paper-deep);
  border-radius: var(--r-2);
  padding: 10px 16px;
  text-align: center;
  border: 1px solid var(--line-strong);
  user-select: none;
}
.reg-captcha-input {
  width: 72px;
  padding: 10px 12px;
  background: var(--paper-deep);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-2);
  font-size: 18px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--ink);
  text-align: center;
  transition: border-color 200ms;
}
.reg-captcha-input:focus { border-color: var(--accent); outline: none; }
.reg-captcha-refresh {
  width: 34px;
  height: 34px;
  border-radius: var(--r-2);
  background: var(--paper-deep);
  border: 1px solid var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--metal);
  cursor: pointer;
  transition: all 150ms;
  flex-shrink: 0;
}
.reg-captcha-refresh:hover { background: var(--paper-warm); color: var(--ink); }

/* Condition selector */
.sell-condition-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}
.sell-condition-card { cursor: pointer; }
.sell-condition-card input[type="radio"] { display: none; }
.condition-content {
  padding: 14px;
  border-radius: var(--r-3);
  border: 1px solid var(--line-strong);
  background: var(--paper-warm);
  transition: all 200ms;
}
.sell-condition-card input:checked + .condition-content {
  border-color: var(--accent);
  background: rgba(232,97,78,0.08);
}
.condition-content p { font-size: 12px; color: var(--metal); margin-top: 4px; line-height: 1.4; }
.condition-badge {
  display: inline-block; padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: 12px; font-weight: 600;
}
.condition-badge.excelente { background: rgba(39,194,128,0.15); color: var(--verified); }
.condition-badge.muy-bueno { background: rgba(91,156,246,0.15); color: var(--finance); }
.condition-badge.bueno     { background: rgba(240,168,58,0.15);  color: var(--amber); }
.condition-badge.regular   { background: rgba(232,97,78,0.15);   color: var(--accent); }

/* Features grid */
.sell-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2);
}

/* Equipamiento segmentado por grupo lógico */
.sell-features-segmented {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
/* Jerarquía propia (no la del label genérico de field-group): debe leerse
   claramente por encima de los subtítulos de cada segmento (Exterior,
   Confort, etc.), que son pequeños y en mayúsculas. */
.sell-equipment-label {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}

.sell-feature-segment-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--s-2);
}
.sell-feature-segment-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2);
}

/* Opciones adicionales del precio — dos tarjetas lado a lado */
.sell-options-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}
.sell-feature-check {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border-radius: var(--r-2);
  border: 1px solid var(--line);
  font-size: 13px; cursor: pointer;
  transition: all 200ms;
  background: var(--paper-warm);
}
.sell-feature-check:hover { border-color: var(--line-strong); }
.sell-feature-check input { accent-color: var(--accent); width: 14px; height: 14px; flex-shrink: 0; }
.sell-feature-check span { color: var(--ink-soft); font-weight: 500; font-size: 12px; }

/* Photo zone */
.sell-photo-zone {
  border: 2px dashed var(--line-strong);
  border-radius: var(--r-3);
  padding: var(--s-6);
  text-align: center;
  transition: all 200ms;
  background: var(--paper-warm);
  cursor: pointer;
}
.sell-photo-zone:hover,
.sell-photo-zone.is-dragover { border-color: var(--accent); background: rgba(232,97,78,0.06); }
.photo-zone-icon {
  width: 48px; height: 48px;
  border-radius: var(--r-3);
  background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--s-3);
}
.photo-zone-icon svg {
  width: 24px; height: 24px;
  fill: none; stroke: var(--metal); stroke-width: 1.5; stroke-linecap: round;
}
.photo-zone-text { font-size: 15px; font-weight: 500; color: var(--ink); margin-bottom: 4px; }
.photo-zone-sub  { font-size: 12px; color: var(--metal); }

.sell-photo-preview {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s-3);
}
.preview-thumb {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--r-2);
  overflow: hidden;
  border: 1px solid var(--line);
}
.preview-thumb img { width: 100%; height: 100%; object-fit: cover; }
.preview-thumb-badge {
  position: absolute; top: 4px; left: 4px;
  background: var(--accent); color: white;
  font-size: 9px; font-weight: 700;
  padding: 2px 6px; border-radius: var(--r-1);
  text-transform: uppercase;
}
.preview-thumb-remove {
  position: absolute; top: 4px; right: 4px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  color: white; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 200ms;
}
.preview-thumb-remove:hover { background: var(--accent); }

.photo-tips {
  padding: var(--s-4);
  background: var(--paper);
  border-radius: var(--r-3);
  border: 1px solid var(--line);
}
.photo-tips-title { font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-bottom: var(--s-2); }
.photo-tips-list { list-style: disc; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.photo-tips-list li { font-size: 13px; color: var(--metal); }

/* Checkbox card */
.sell-checkbox-card {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px;
  border-radius: var(--r-2);
  border: 1px solid var(--line-strong);
  background: var(--paper-warm);
  cursor: pointer; transition: all 200ms;
}
.sell-checkbox-card:has(input:checked) { border-color: var(--accent); background: rgba(232,97,78,0.08); }
.sell-checkbox-card input { accent-color: var(--accent); width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
.sell-checkbox-card span { display: flex; flex-direction: column; gap: 2px; }
.sell-checkbox-card strong { font-size: 14px; font-weight: 600; color: var(--ink); }
.sell-checkbox-card small { font-size: 12px; color: var(--metal); }

/* Price suggestion */
.sell-price-suggestion {
  background: rgba(91,156,246,0.08);
  border: 1px solid rgba(91,156,246,0.25);
  border-radius: var(--r-3);
  padding: var(--s-4);
  font-size: 13px; color: var(--finance);
  display: none;
}
.sell-price-suggestion.is-visible { display: block; }

/* User prefill */
.sell-user-prefill {
  background: rgba(39,194,128,0.08);
  border: 1px solid rgba(39,194,128,0.2);
  border-radius: var(--r-3);
  padding: var(--s-4);
  display: flex; align-items: center; gap: var(--s-3);
  font-size: 13px; color: var(--verified);
}
.sell-user-prefill:empty { display: none; }

/* Sell preview (step 6) */
.sell-preview {
  background: var(--paper);
  border-radius: var(--r-3);
  border: 1px solid var(--line);
  padding: 0;
  margin-bottom: var(--s-5);
  overflow: hidden;
}

/* ── Review sections (step 6) ── */
.sell-review-section {
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--line);
}
.sell-review-section:last-child { border-bottom: none; }

.sell-review-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s-3);
}
.sell-review-section-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--metal);
  font-family: var(--font-mono);
}
.sell-review-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: opacity 150ms;
}
.sell-review-edit-btn:hover { opacity: 0.65; }

.sell-review-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3) var(--s-4);
}
.sell-review-item { display: flex; flex-direction: column; gap: 2px; }
.sell-review-label {
  font-size: 10px;
  color: var(--metal);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--font-mono);
}
.sell-review-value { font-size: 13px; font-weight: 500; color: var(--ink); }

.sell-review-photos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.sell-review-photo-thumb {
  position: relative;
  width: 72px; height: 54px;
  border-radius: var(--r-2);
  overflow: hidden;
  background: var(--paper-warm);
  flex-shrink: 0;
}
.sell-review-photo-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sell-review-photo-badge {
  position: absolute;
  bottom: 3px; left: 3px;
  font-size: 9px; font-weight: 600;
  background: var(--accent); color: #fff;
  padding: 1px 5px;
  border-radius: var(--r-1);
}

.sell-review-features {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--s-3);
}
.sell-review-feature {
  font-size: 11px;
  padding: 3px 10px;
  background: var(--paper-warm);
  border-radius: var(--r-pill);
  color: var(--ink-soft);
}

.sell-review-description {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin-top: var(--s-3);
  white-space: pre-wrap;
}
.sell-review-empty {
  font-size: 13px;
  color: var(--metal);
  font-style: italic;
}

/* ── Upgrade summary block inside step-7 review ── */
.sell-review-upgrade {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-2);
  border: 1px solid var(--line-strong);
}
.sell-review-upgrade--selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.sell-review-upgrade--none {
  background: var(--paper-warm);
}
.sell-review-upgrade-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sell-review-upgrade--selected .sell-review-upgrade-icon { background: var(--accent); color: #fff; }
.sell-review-upgrade--none    .sell-review-upgrade-icon { background: var(--paper); color: var(--metal); }
.sell-review-upgrade-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sell-review-upgrade-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}
.sell-review-upgrade-price {
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--metal);
}
.sell-review-upgrade--selected .sell-review-upgrade-price { color: var(--accent); font-weight: 600; }

/* Publish info */
.sell-publish-info { display: flex; flex-direction: column; gap: var(--s-3); margin-bottom: var(--s-5); }
.publish-info-row { display: flex; align-items: flex-start; gap: var(--s-3); font-size: 13px; color: var(--ink-soft); }
.publish-info-row svg {
  width: 18px; height: 18px;
  fill: none; stroke: var(--verified); stroke-width: 1.5; stroke-linecap: round;
  flex-shrink: 0; margin-top: 1px;
}

.btn-sell-publish {
  width: 100%;
  background: var(--accent); color: white;
  font-size: 16px; font-weight: 600;
  padding: 14px 20px; border-radius: var(--r-2);
  text-align: center;
  transition: all 200ms var(--ease-out);
  border: none; cursor: pointer;
}
.btn-sell-publish:hover {
  background: var(--accent-deep);
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(232,97,78,0.4);
}

/* Sell footer */
.sell-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--s-4) 0;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  background: var(--paper-deep);
  z-index: 5;
}
.sell-footer-next {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--s-2);
}
.sell-footer-hint {
  margin: 0;
  max-width: 340px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-soft);
  text-align: right;
}
.sell-footer-hint[hidden] { display: none; }
.btn-sell-back {
  background: transparent; color: var(--ink-soft);
  font-size: 14px; font-weight: 500;
  padding: 10px 20px; border-radius: var(--r-2);
  border: 1px solid var(--line-strong);
  transition: all 200ms; cursor: pointer;
}
.btn-sell-back:hover { background: var(--paper-warm); color: var(--ink); }
.btn-sell-next {
  background: var(--accent); color: white;
  font-size: 15px; font-weight: 600;
  padding: 12px 28px; border-radius: var(--r-2);
  transition: all 200ms var(--ease-out);
  border: none; cursor: pointer;
}
.btn-sell-next:hover {
  background: var(--accent-deep);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(232,97,78,0.35);
}

/* Sell success */
.sell-success { text-align: center; padding: var(--s-8) var(--s-6); }
.sell-success-icon {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: rgba(39,194,128,0.12);
  border: 2px solid var(--verified);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--s-5);
}
.sell-success-icon svg {
  width: 36px; height: 36px;
  fill: none; stroke: var(--verified); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.sell-success-title { font-family: var(--font-display); font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: var(--s-3); }
.sell-success-sub { font-size: 15px; color: var(--ink-soft); line-height: 1.6; max-width: 400px; margin: 0 auto var(--s-4); }
.sell-success-num {
  font-family: var(--font-mono); font-size: 14px; color: var(--metal);
  padding: 8px 20px; background: var(--paper);
  border-radius: var(--r-pill); display: inline-block;
  margin-bottom: var(--s-5); border: 1px solid var(--line);
}

/* Responsive auth + sell */
@media (max-width: 600px) {
  .auth-view { padding: var(--s-6) var(--s-5) var(--s-5); }
  .field-row-2 { grid-template-columns: 1fr; }
  .field-row-3 { grid-template-columns: 1fr; }
  .sell-condition-group { grid-template-columns: 1fr; }
  .sell-features-grid { grid-template-columns: repeat(2, 1fr); }
  .sell-feature-segment-grid { grid-template-columns: repeat(2, 1fr); }
  .sell-options-row { grid-template-columns: 1fr; }
  .sell-photo-preview { grid-template-columns: repeat(3, 1fr); }
  .sell-preview-grid { grid-template-columns: repeat(2, 1fr); }
  .sell-review-grid { grid-template-columns: repeat(2, 1fr); }
  .sell-review-section { padding: var(--s-3) var(--s-4); }
  .sell-body { padding: var(--s-4) 0; }
  .sell-footer { padding: var(--s-3) 0; }
  .sell-steps { display: none; }
  .sell-step-mobile { display: block; }
  .sell-seller-type-group { grid-template-columns: 1fr; }
  .reg-profile-group { grid-template-columns: 1fr; }
  .btn-ingresar { font-size: 13px; padding: 6px 12px; }
  .upgrade-grid { grid-template-columns: 1fr; }
  .upgrade-card-special-body { grid-template-columns: 1fr; gap: var(--s-3); }
  /* Option 4 mobile — el módulo "Seleccionados" (preview) es redundante con
     el carrito de mejoras inferior y no se ve bien acá, así que se oculta
     solo en mobile. El selector de mensajes se mantiene. */
  .upgrade-card--special .upgrade-special-tags { max-height: 130px; overflow-y: auto; }
  .upgrade-card--special .upgrade-special-preview { display: none; }
  .calc-invite-inner { flex-direction: column; text-align: center; }
}

/* ==========================================================================
   UPGRADE OPTIONS — post-publish mejora de publicación
   ========================================================================= */
.upgrade-section { padding: var(--s-4) 0 var(--s-7); }


.upgrade-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}

.upgrade-card {
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-3);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  position: relative;
  transition: border-color 200ms, box-shadow 200ms, transform 150ms;
}
.upgrade-card:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), var(--shadow-md);
  transform: translateY(-2px);
}
.upgrade-card.is-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent), var(--shadow-md);
  background: color-mix(in srgb, var(--accent) 6%, var(--paper));
  transform: translateY(-2px);
}

.upgrade-card--featured {}

.upgrade-card--special { background: var(--paper-warm); }

.upgrade-card-tag {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: var(--r-pill);
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
}

.upgrade-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-2);
}

.upgrade-badge {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--metal);
  font-family: var(--font-mono);
  padding: 3px 8px;
  background: var(--paper-deep);
  border-radius: var(--r-1);
}

/* Agrupa precio + IVA como una sola unidad flex, siempre pegada a la
   esquina superior derecha del header (ver .upgrade-card-header arriba) —
   evita que ambos floten como ítems sueltos de space-between. */
.upgrade-price-wrap {
  display: flex;
  align-items: baseline;
  gap: var(--s-1);
  flex-shrink: 0;
  white-space: nowrap;
}

.upgrade-price {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -0.03em;
}
/* Leyenda "+IVA" de todo cobro del sitio. .upgrade-price-iva es la variante
   histórica de las tarjetas de mejoras; .price-iva es la genérica que usan el
   resto de superficies de cobro (destacar, pago, espacios, resúmenes).
   Los precios de vehículos NO la llevan: esa venta no la gestiona la plataforma. */
.price-iva,
.upgrade-price-iva {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-soft);
}
.price-iva { margin-left: 4px; white-space: nowrap; }
/* Sobre fondos de acento (botones de confirmación) el gris no contrasta. */
.price-iva--inverse { color: inherit; opacity: 0.8; }

.upgrade-card-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
}

.upgrade-card-desc {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.65;
  margin: 0;
  flex: 1;
}

/* Razón por la que la Opción 1 está deshabilitada para el vendedor registrado
   (ver setUpgradeIncludedNote en app.js): el estado apagado por sí solo no
   explica nada. */
.upgrade-card-included {
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-soft);
  background: rgba(237, 240, 247, 0.06);
  border-left: 2px solid var(--accent);
  border-radius: var(--r-1);
  padding: var(--s-2) var(--s-3);
  margin: 0 0 var(--s-3);
}
.upgrade-card-included strong { color: var(--ink); }

.upgrade-card-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--s-3);
  background: var(--paper-deep);
  border-radius: var(--r-2);
}

.upgrade-option-radio {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  cursor: pointer;
  font-weight: 500;
}

.upgrade-special-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  max-height: 130px;
  overflow-y: auto;
  padding: var(--s-3);
  background: #f3f4f8;
  border: 1.5px solid #d8dce8;
  border-radius: var(--r-3);
  scrollbar-width: thin;
}

.upgrade-special-tag {
  font-size: 12px;
  padding: 5px 13px;
  background: #fff;
  border: 1.5px solid var(--tag-color, var(--line-strong));
  border-radius: var(--r-pill);
  color: var(--tag-color, var(--ink));
  cursor: pointer;
  transition: background 150ms, color 150ms, box-shadow 150ms, transform 80ms;
  white-space: nowrap;
  font-weight: 700;
  user-select: none;
}
.upgrade-special-tag:hover {
  background: var(--tag-color, var(--accent));
  border-color: var(--tag-color, var(--accent));
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}
.upgrade-special-tag.is-selected {
  background: var(--tag-color, var(--accent));
  border-color: var(--tag-color, var(--accent));
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.22);
}

/* Option 4 – full-width two-panel layout */
.upgrade-card--special {
  background: var(--paper-warm);
  margin-bottom: var(--s-4);
}
@media (min-width: 601px) {
  .upgrade-card--special .upgrade-special-tags {
    max-height: none;
    overflow-y: visible;
  }
}

.upgrade-card-special-body {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: var(--s-5);
  align-items: start;
}

.upgrade-special-selector-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--metal);
  margin-bottom: var(--s-2);
}

/* Right panel */
.upgrade-special-preview {
  background: #f0f4ff;
  border: 1.5px solid #c5d0ee;
  border-top: 3px solid var(--accent, #4f6ef7);
  border-radius: var(--r-3);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-height: 170px;
}
.upgrade-special-preview-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.upgrade-special-preview-head-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.upgrade-special-preview-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--metal);
}
.upgrade-special-preview-count {
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--ink-soft);
  background: #fff;
  border: 1.5px solid #c5d0ee;
  border-radius: var(--r-pill);
  padding: 2px 9px;
}
.upgrade-special-clear {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #c0392b;
  background: rgba(192, 57, 43, 0.08);
  border: 1px solid rgba(192, 57, 43, 0.25);
  border-radius: var(--r-pill);
  cursor: pointer;
  padding: 2px 8px;
  transition: background 120ms, border-color 120ms;
  line-height: 1.6;
}
.upgrade-special-clear:hover {
  background: rgba(192, 57, 43, 0.16);
  border-color: rgba(192, 57, 43, 0.5);
}
.upgrade-special-empty-state {
  font-size: 12px;
  color: #8a96b5;
  text-align: center;
  font-style: italic;
  padding: var(--s-3) 0;
  margin: 0;
  flex: 1;
}
.upgrade-special-preview-tags {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.upgrade-preview-tag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 8px 8px 14px;
  background: var(--tag-color, var(--accent));
  color: #fff;
  border-radius: var(--r-2);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.upgrade-preview-tag-label {
  flex: 1;
}
.upgrade-preview-tag-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background: rgba(255,255,255,0.22);
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 50%;
  color: #fff;
  font-size: 11px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: background 120ms;
}
.upgrade-preview-tag-remove:hover {
  background: rgba(255,255,255,0.45);
}

/* Price toggle rows */
.upgrade-special-price-options {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 1px solid #c5d0ee;
  padding-top: var(--s-3);
  margin-top: auto;
}
.upgrade-special-price-options span {
  font-size: 13px;
  font-weight: 600;
  color: #6b7599;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 10px;
  border-radius: var(--r-2);
  border: 1px solid transparent;
  transition: background 150ms, color 150ms, border-color 150ms;
}
.upgrade-special-price-options span em {
  font-style: normal;
  font-size: 11px;
  color: #9aa3bf;
}
/* Solo indica "este es el precio que aplica" — sin fondo sólido ni sombra,
   que antes lo hacían leer como un botón clickeable (no lo es, es un
   resultado de los tags seleccionados arriba). */
.upgrade-special-price-options span.is-active {
  background: color-mix(in srgb, var(--accent, #4f6ef7) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent, #4f6ef7) 35%, transparent);
  color: var(--accent, #4f6ef7);
  font-weight: 700;
  box-shadow: none;
  cursor: default;
}
.upgrade-special-price-options span.is-active em {
  color: var(--accent, #4f6ef7);
  opacity: 0.7;
}

.btn-upgrade {
  display: block;
  width: 100%;
  padding: 13px 16px;
  background: var(--paper-deep);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 150ms;
  text-align: center;
  margin-top: auto;
}
.btn-upgrade:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.btn-upgrade--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn-upgrade--primary:hover { filter: brightness(1.1); }

/* Botón cuando la mejora ya está agregada */
.btn-upgrade--added {
  background: color-mix(in srgb, var(--verified) 16%, var(--paper-deep));
  border-color: var(--verified);
  color: var(--verified);
}
.btn-upgrade--added:hover {
  background: color-mix(in srgb, var(--verified) 24%, var(--paper-deep));
  color: var(--verified);
  border-color: var(--verified);
}
.btn-upgrade:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--paper-deep);
  color: var(--metal);
  border-color: var(--line);
}
.btn-upgrade:disabled:hover { background: var(--paper-deep); color: var(--metal); border-color: var(--line); }

/* Tarjeta de opción deshabilitada (Opción 1 cuando ya se eligió la 2) */
/* Perfil de vendedor registrado: el módulo de favoritos no le aplica, así que
   además de sus accesos en el header (ver updateAuthHeader) desaparece el
   corazón de cada tarjeta. */
body.is-recurrente .card-fav { display: none; }

.upgrade-card.is-disabled {
  opacity: 0.55;
  pointer-events: none;
}
.upgrade-card.is-disabled .btn-upgrade { pointer-events: auto; }

/* Carrito de mejoras — resumen acumulado */
.upgrade-cart {
  margin-top: var(--s-6);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-3);
  padding: var(--s-5);
}
.upgrade-cart-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--s-4);
}
.upgrade-cart-head svg { stroke: var(--accent); }
.upgrade-cart-empty {
  font-size: 13px;
  color: var(--metal);
  padding: var(--s-2) 0;
}
.upgrade-cart-items {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.upgrade-cart-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3);
  background: var(--paper-warm);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
}
.upgrade-cart-item-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}
.upgrade-cart-item-right {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-shrink: 0;
}
.upgrade-cart-item-price {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.upgrade-cart-item-remove {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--metal);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  transition: all 150ms;
}
.upgrade-cart-item-remove:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.upgrade-cart-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink-soft);
}
.upgrade-cart-total-row strong {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
  color: var(--accent);
}

/* Liquidación del carrito: subtotal → IVA → total (ver
   renderUpgradeCartSummary en app.js). La línea divisoria pasa del total al
   bloque completo, así subtotal e IVA quedan del lado del resumen. */
.upgrade-cart-summary {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}
.upgrade-cart-sum-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  font-size: 13px;
  color: var(--ink-soft);
}
.upgrade-cart-sum-row[hidden] { display: none; }
.upgrade-cart-sum-row strong {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.upgrade-cart-summary .upgrade-cart-total-row {
  margin-top: var(--s-1);
  padding-top: 0;
  border-top: 0;
}
/* Review — lista de mejoras en el paso de confirmación */
.sell-review-upgrade-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.sell-review-upgrade-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  font-size: 13px;
  color: var(--ink-soft);
}
.sell-review-upgrade-row .sell-review-upgrade-price {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--ink);
}
.sell-review-upgrade-total {
  margin-top: var(--s-2);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  font-weight: 700;
  color: var(--ink);
}
.sell-review-upgrade-total span:last-child { color: var(--accent); }

/* Barra "Terminar edición" — visible al editar desde la confirmación */
.sell-edit-bar {
  position: sticky;
  top: var(--header-h);
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-bottom: var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: color-mix(in srgb, var(--accent) 10%, var(--paper));
  border: 1px solid var(--accent);
  border-radius: var(--r-2);
}
.sell-edit-bar-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.sell-edit-bar-text svg { stroke: var(--accent); }
.sell-edit-bar-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--r-2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 150ms;
}
.sell-edit-bar-btn:hover { background: var(--accent-deep); }

/* Mensaje "sin mejoras" enriquecido en la confirmación */
.sell-review-noupgrade {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.sell-review-noupgrade-head {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
}
.sell-review-noupgrade-icon {
  width: 36px; height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--amber) 18%, var(--paper));
  color: var(--amber);
}
.sell-review-noupgrade-headtext strong {
  display: block;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
}
.sell-review-noupgrade-headtext p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.sell-review-noupgrade-lead {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-top: var(--s-1);
}
.sell-review-noupgrade-benefits {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
}
.sell-review-noupgrade-benefits li {
  position: relative;
  padding-left: 24px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-soft);
}
.sell-review-noupgrade-benefits li::before {
  content: '';
  position: absolute;
  left: 0; top: 3px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--verified);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.btn-add-upgrades {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--s-1);
  padding: 11px 20px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--r-2);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 150ms, transform 150ms;
}
.btn-add-upgrades:hover { background: var(--accent-deep); transform: translateY(-1px); }

.upgrade-skip {
  text-align: center;
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
}

.btn-upgrade-skip {
  background: none;
  border: none;
  color: var(--ink-soft);
  font-size: 14px;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  padding: var(--s-2) var(--s-4);
  transition: color 150ms, text-decoration-color 150ms;
}
.btn-upgrade-skip:hover { color: var(--ink); text-decoration-color: var(--ink); }

.upgrade-skip-note {
  font-size: 12px;
  color: var(--metal);
  margin-top: var(--s-2);
}

.btn-upgrade-no-mejoras {
  display: block;
  width: 100%;
  padding: 16px;
  background: var(--bg-body);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--r-2);
  color: var(--ink-soft);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 150ms, color 150ms;
  text-align: center;
}
.btn-upgrade-no-mejoras:hover {
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--ink);
}

/* Modal confirmación pendiente */
.sell-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms var(--ease-out);
}
.sell-confirm-overlay.is-open {
  opacity: 1;
  pointer-events: all;
}
.sell-confirm-modal {
  background: var(--paper-deep);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-4);
  padding: var(--s-8) var(--s-6) var(--s-7);
  max-width: 420px;
  width: 100%;
  text-align: center;
  transform: translateY(20px) scale(0.97);
  transition: transform 350ms var(--ease-expo);
}
.sell-confirm-overlay.is-open .sell-confirm-modal {
  transform: translateY(0) scale(1);
}
.sell-confirm-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--amber);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--s-5);
}
.sell-confirm-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 var(--s-3);
  line-height: 1.3;
}
.sell-confirm-body {
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 var(--s-4);
}

.sell-confirm-note {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0 0 var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: color-mix(in srgb, var(--amber) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--amber) 30%, transparent);
  border-radius: var(--r-2);
}
.sell-confirm-ref {
  font-size: 13px;
  font-weight: 600;
  color: var(--metal);
  font-family: var(--font-mono);
  margin: 0 0 var(--s-6);
}
.btn-sell-confirm-ok {
  display: block;
  width: 100%;
  padding: 14px;
  background: var(--accent);
  border: none;
  border-radius: var(--r-2);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: filter 150ms;
}
.btn-sell-confirm-ok:hover { filter: brightness(1.1); }
/* Encuesta "¿Vendió este artículo?" tras eliminar un anuncio publicado. */
.delete-survey-icon { background: var(--verified); }
.delete-survey-q {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0 0 var(--s-5);
}
.delete-survey-options {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
  text-align: left;
}
.delete-survey-opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 13px var(--s-4);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 150ms, background 150ms;
}
.delete-survey-opt:hover { border-color: var(--ink-soft); }
.delete-survey-opt input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.delete-survey-radio {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--metal);
  transition: border-color 150ms, box-shadow 150ms;
}
.delete-survey-opt:has(input:checked) { border-color: var(--accent); }
.delete-survey-opt input:checked + .delete-survey-radio {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 8px var(--accent);
}
.delete-survey-opt input:focus-visible + .delete-survey-radio { outline: 2px solid var(--accent); outline-offset: 2px; }
.delete-survey .btn-sell-confirm-ok:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: none;
}
.delete-survey-close {
  margin-top: var(--s-4);
  background: none;
  border: 0;
  font-size: 13px;
  color: var(--ink-soft);
  cursor: pointer;
}
.delete-survey-close:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.btn-publish-limit-secondary {
  display: block;
  width: 100%;
  margin-top: var(--s-3);
  padding: 14px;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  color: var(--ink-soft);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.btn-publish-limit-secondary:hover { background: var(--paper-warm); }
.btn-publish-limit-secondary[hidden] { display: none; }

/* Variante de icono para modales de confirmación destructiva (p.ej. eliminar
   publicación) — mismo contenedor circular que .sell-confirm-icon. */
.sell-confirm-icon--danger { background: #e5484d; }

.confirm-action-btns {
  display: flex;
  gap: var(--s-3);
}
.confirm-action-btns .btn-confirm-cancel,
.confirm-action-btns .btn-confirm-danger {
  flex: 1;
  padding: 14px;
  border-radius: var(--r-2);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: filter 150ms, background 150ms;
}
.btn-confirm-cancel {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
}
.btn-confirm-cancel:hover { background: var(--paper-warm); }
.btn-confirm-danger {
  background: #e5484d;
  border: none;
  color: #fff;
}
.btn-confirm-danger:hover { filter: brightness(1.1); }

/* ==========================================================================
   SELL TYPE SELECTION — pantalla inicial vendedor individual / recurrente
   ========================================================================= */
.sell-type-screen {
  padding: var(--s-7) 0 var(--s-9);
  animation: fadeUp 320ms var(--ease-out) both;
}

.sell-type-intro {
  text-align: center;
  margin-bottom: var(--s-8);
}

.sell-type-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 4vw, 34px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s-2);
}

.sell-type-sub {
  color: var(--ink-soft);
  font-size: 15px;
  margin: 0;
}

.sell-type-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
  align-items: stretch;
}

@media (max-width: 580px) {
  .sell-type-cards { grid-template-columns: 1fr; }
}

.sell-type-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--s-6);
  background: var(--paper);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-4);
  transition: border-color 200ms, box-shadow 200ms;
}

.sell-type-card:hover {
  border-color: var(--accent);
  box-shadow: 0 12px 32px rgba(0,0,0,0.22);
}

.sell-type-card--recurrent {
  border-color: color-mix(in srgb, var(--amber) 35%, var(--line-strong));
}

.sell-type-card--recurrent:hover {
  border-color: var(--amber);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--amber) 18%, transparent);
}

.sell-type-card-badge {
  position: absolute;
  top: var(--s-4);
  right: var(--s-4);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 10px;
  background: color-mix(in srgb, var(--amber) 20%, transparent);
  border: 1px solid var(--amber);
  border-radius: var(--r-pill);
  color: var(--amber);
}

/* Header: icon + title/tagline side by side */
.sell-type-card-header {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--line-soft);
}

.sell-type-card-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--r-3);
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}

.sell-type-card--recurrent .sell-type-card-icon {
  background: color-mix(in srgb, var(--amber) 15%, transparent);
  border-color: color-mix(in srgb, var(--amber) 30%, transparent);
  color: var(--amber);
}

.sell-type-card-icon svg { width: 24px; height: 24px; }

.sell-type-card-title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  margin: 0 0 3px;
  line-height: 1.2;
}

.sell-type-card-tagline {
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.45;
  margin: 0;
}

/* Benefits list */
.sell-type-benefits {
  list-style: none;
  margin: 0 0 var(--s-6);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  flex: 1;
}

.sell-type-benefit {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: 14px;
  color: var(--ink);
  line-height: 1.4;
}

.benefit-check {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--accent);
}

.sell-type-benefits--recurrent .benefit-check {
  color: var(--amber);
}

/* CTA button pinned to bottom */
.sell-type-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 12px var(--s-5);
  border-radius: var(--r-3);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 180ms, box-shadow 180ms, opacity 180ms;
  background: var(--accent);
  color: #fff;
  border: none;
  margin-top: auto;
}

.sell-type-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 85%, #000);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 40%, transparent);
}

.sell-type-btn--recurrent {
  background: var(--amber);
  color: #000;
}

.sell-type-btn--recurrent:hover:not(:disabled) {
  background: color-mix(in srgb, var(--amber) 85%, #000);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--amber) 40%, transparent);
}

.sell-type-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ==========================================================================
   SELL INTRO — pantalla que incentiva a destacar el anuncio
   ========================================================================= */
.sell-intro {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}
.sell-intro-hero { text-align: center; }
.sell-intro-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  padding: 5px 12px;
  border-radius: var(--r-pill);
  margin-bottom: var(--s-3);
}
.sell-intro-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 4.5vw, 38px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s-2);
}
.sell-intro-title em { color: var(--accent); font-style: normal; }
.sell-intro-sub {
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.5;
  margin: 0 auto;
  max-width: 520px;
}

.sell-intro-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
}
.sell-intro-stat {
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-3);
  padding: var(--s-4);
  text-align: center;
}
.sis-num {
  font-family: var(--font-display);
  font-size: clamp(26px, 4vw, 34px);
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 6px;
}
.sis-label { font-size: 12px; color: var(--ink-soft); line-height: 1.35; }

.sell-intro-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
  align-items: stretch;
}
.sic-col {
  position: relative;
  background: var(--paper);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-4);
  padding: var(--s-5);
}
.sic-col--featured {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--paper));
  box-shadow: 0 12px 32px color-mix(in srgb, var(--accent) 16%, transparent);
}
.sic-tag {
  position: absolute;
  top: calc(-1 * var(--s-3));
  left: var(--s-5);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent);
  padding: 3px 11px;
  border-radius: var(--r-pill);
}
.sic-head {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--s-3);
}
.sic-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.sic-list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink);
}
.sic-list .benefit-check { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--verified); }
.sic-star { width: 15px; height: 15px; flex: none; margin-top: 1px; color: var(--accent); }

.sell-intro-cta { text-align: center; }
.sell-intro-btn {
  width: auto;
  min-width: 260px;
  margin: 0 auto var(--s-3);
  padding: 14px var(--s-7);
  font-size: 15px;
}
.sell-intro-note {
  font-size: 12px;
  color: var(--ink-soft);
  margin: 0 auto;
  max-width: 460px;
  line-height: 1.45;
}

@media (max-width: 640px) {
  .sell-intro-stats { grid-template-columns: 1fr; }
  .sell-intro-compare { grid-template-columns: 1fr; }
  .sell-intro-btn { width: 100%; min-width: 0; }
}

/* ==========================================================================
   SELL RECURRENTE SCREEN — planes con blur / próximamente
   ========================================================================= */
.sell-recurrente-screen {
  padding: var(--s-5) 0 var(--s-9);
  animation: fadeUp 320ms var(--ease-out) both;
}

.sell-recurrente-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--ink-soft);
  font-size: 14px;
  cursor: pointer;
  padding: var(--s-2) 0;
  margin-bottom: var(--s-6);
  transition: color 150ms;
}
.sell-recurrente-back:hover { color: var(--ink); }

.sell-recurrente-header {
  text-align: center;
  margin-bottom: var(--s-7);
}

.sell-recurrente-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 4vw, 34px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s-2);
}
.sell-recurrente-title span { color: var(--amber); font-style: italic; }

.sell-recurrente-sub {
  color: var(--ink-soft);
  font-size: 15px;
  margin: 0;
}

.sell-recurrente-plans-wrap {
  position: relative;
}

.sell-recurrente-plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  filter: blur(6px);
  user-select: none;
  pointer-events: none;
}

@media (max-width: 640px) {
  .sell-recurrente-plans { grid-template-columns: 1fr; }
}

.sell-plan-card {
  position: relative;
  background: var(--paper);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-4);
  padding: var(--s-6);
}

.sell-plan-card--featured {
  border-color: var(--amber);
  background: color-mix(in srgb, var(--amber) 6%, var(--paper));
}

.sell-plan-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 10px;
  background: var(--amber);
  color: var(--paper);
  border-radius: var(--r-pill);
  margin-bottom: var(--s-4);
}

.sell-plan-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: var(--s-2);
}

.sell-plan-price {
  font-size: 28px;
  font-weight: 800;
  color: var(--amber);
  margin-bottom: var(--s-5);
}
.sell-plan-price span { font-size: 14px; font-weight: 500; color: var(--ink-soft); }

.sell-plan-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  font-size: 13px;
  color: var(--ink-soft);
}
.sell-plan-features li::before {
  content: '✓ ';
  color: var(--verified);
  font-weight: 700;
}

/* Overlay "Aún no disponible" sobre los planes */
.sell-recurrente-unavail {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--s-6);
  background: color-mix(in srgb, var(--bg-body) 60%, transparent);
  backdrop-filter: blur(2px);
  border-radius: var(--r-4);
  gap: var(--s-3);
}

.sell-recurrente-unavail-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--amber) 15%, transparent);
  border: 1.5px solid var(--amber);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--amber);
  margin-bottom: var(--s-1);
}

.sell-recurrente-unavail-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  margin: 0;
}

.sell-recurrente-unavail-body {
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.6;
  max-width: 380px;
  margin: 0;
}

/* ==========================================================================
   CALC INVITE — bloque de invitación a registrarse en calculadora
   ========================================================================= */
.calc-invite {
  margin-top: var(--s-5);
  border-radius: var(--r-3);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line));
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 7%, var(--paper-deep)),
    color-mix(in srgb, var(--accent) 4%, var(--paper-deep))
  );
  transition: opacity 300ms;
}
.calc-invite.is-hidden { display: none; }

.calc-invite-inner {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
}

.calc-invite-icon {
  width: 48px; height: 48px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--accent);
}

.calc-invite-body { flex: 1; }

.calc-invite-body strong {
  display: block;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
}

.calc-invite-body p {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.55;
}

.btn-calc-invite {
  flex-shrink: 0;
  padding: 11px 20px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--r-2);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 150ms;
}
.btn-calc-invite:hover { filter: brightness(1.12); }

/* ==========================================================================
   FICHA REDESIGN — galería, quickstats, historial, panel
   ========================================================================= */

/* Topbar (volver + miga de pan) — navegación explícita de la ficha. La flecha
   del botón es el <svg> inline del markup: NO agregar un ::before con otra
   flecha (fue el bug de "doble flecha" que hizo que este header se quitara). */
.ficha-topbar {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-6);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}

/* "Volver" es texto plano con flecha de texto ("← Volver a Inicio"): sin
   píldora, sin borde y sin chevron SVG. Misma regla para .mn-back. */
.ficha-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  background: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  flex-shrink: 0;
}
.ficha-back:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ficha-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 13px;
  color: var(--metal);
  overflow: hidden;
  white-space: nowrap;
}

/* Migajas navegables (origen y marca) — se ven como texto, se comportan como
   enlaces; el auto actual (.ficha-crumb-current) no es clicable. */
.ficha-crumb {
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  color: var(--metal);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 150ms;
}
.ficha-crumb:hover { color: var(--accent); text-decoration: underline; }

.ficha-crumb-current {
  color: var(--ink);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.ficha-bc-sep {
  opacity: 0.45;
  flex-shrink: 0;
}

/* El bloque .ficha-intro (precio suelto arriba, solo mobile) se eliminó: el
   precio ahora vive junto a la identidad del auto en .ficha-panel-head, dentro
   de la card superior. */

/* Gallery — thumbs now below main image */
.ficha-gallery {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.gallery-thumbs {
  display: flex;
  flex-direction: row;
  gap: var(--s-2);
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.gallery-thumbs::-webkit-scrollbar { display: none; }

.gallery-thumb {
  width: 72px;
  height: 56px;
  flex-shrink: 0;
  border-radius: var(--r-1);
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color 150ms;
}
.gallery-thumb.is-active { border-color: var(--accent); }
.gallery-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* Panel — la card en sí ya NO es sticky: lo es su columna entera
   (.ficha-panel-col), para que el CTA "Comparar este vehículo" viaje pegado a
   ella. Cuando el sticky vivía acá, el botón quedaba en flujo normal debajo y
   al hacer scroll la card se le montaba encima hasta taparlo. */
.ficha-panel {
  width: 100%;
  box-sizing: border-box;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-3);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  box-shadow: var(--shadow-md);
}

/* Card duplicada arriba — solo mobile/tablet, oculta en desktop donde
   el sidebar (.ficha-panel original) ya está siempre visible. */
.ficha-panel-top {
  display: none;
}

/* Envuelve la card duplicada de arriba + su CTA de comparar — misma
   visibilidad mobile-only que .ficha-panel-top (ver override a flex en el
   breakpoint ≤900px más abajo). */
.ficha-panel-top-col {
  display: none;
}

/* Head unificado de la card superior — LA información del vehículo y su
   precio en un solo bloque, idéntico en la card sticky de escritorio y en la
   duplicada de mobile. Antes el precio vivía suelto arriba (.ficha-intro) y la
   identidad solo existía en el panel de escritorio. */
.ficha-panel-head {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line);
}
/* Dentro del head el precio ya está separado por el gap del flex — su borde
   superior propio sobraría y partiría el bloque en dos. */
.ficha-panel-head .ficha-price-block { padding-top: 0; border-top: none; }

.ficha-panel-identity {
  display: flex;
  flex-direction: column;
}

/* Badges sobre el título: condición del vehículo + estado del anuncio. */
.ficha-panel-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--s-3);
}
.fpb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  border: 1px solid transparent;
}
.fpb::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.fpb--cond.is-excelente { color: #27C280; background: rgba(39, 194, 128, 0.14); border-color: rgba(39, 194, 128, 0.35); }
.fpb--cond.is-muybueno  { color: #2BB8A8; background: rgba(43, 184, 168, 0.14); border-color: rgba(43, 184, 168, 0.35); }
.fpb--cond.is-bueno     { color: #5B9CF6; background: rgba(91, 156, 246, 0.14); border-color: rgba(91, 156, 246, 0.35); }
.fpb--cond.is-regular   { color: #F0A83A; background: rgba(240, 168, 58, 0.14);  border-color: rgba(240, 168, 58, 0.35); }
/* Etiquetas de colores de las cards, en versión suave: el color de cada una
   tiñe el borde y el fondo, y el texto se mezcla con la tinta del tema para
   que se lea también con colores oscuros. */
.fpb--promo {
  color: color-mix(in srgb, var(--ptag) 65%, var(--ink));
  background: color-mix(in srgb, var(--ptag) 14%, transparent);
  border-color: color-mix(in srgb, var(--ptag) 35%, transparent);
}
.fpb--status            { color: var(--ink-soft); background: var(--paper-warm); border-color: var(--line-strong); }
.fpb--status.is-active  { color: #27C280; }
.fpb--status.is-paused  { color: #F0A83A; }
.fpb--status.is-pending { color: #5B9CF6; }
.fpb--status.is-expired { color: #E5484D; }
.ficha-panel-brand {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.ficha-panel-model {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: -0.005em;
  margin-top: 2px;
}
.ficha-panel-variant {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 4px;
}

.ficha-panel-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3) var(--s-4);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line);
}
.fp-spec {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fp-spec-label {
  font-size: 11px;
  color: var(--metal);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.fp-spec-val {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  font-family: var(--font-mono);
}

.ficha-price-block {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-2) var(--s-3);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line);
}
.ficha-price-block > div:first-child {
  flex: 1 1 auto;
  min-width: 0;
}

.ficha-price-usd-panel {
  font-size: 14px;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-weight: 500;
  margin-top: 4px;
}

/* Quick stats bar */
.ficha-quickstats {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-3);
  overflow: hidden;
  overflow-x: auto;
  scrollbar-width: none;
}
.ficha-quickstats::-webkit-scrollbar { display: none; }

.fqs-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: 1;
  min-width: 90px;
  text-align: center;
  padding: var(--s-4) var(--s-3);
  transition: background 150ms;
}
.fqs-item:hover { background: var(--paper-warm); }

.fqs-icon {
  width: 34px; height: 34px;
  background: color-mix(in srgb, var(--accent) 10%, var(--paper-deep));
  border-radius: var(--r-2);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
}

.fqs-label {
  font-size: 10px;
  color: var(--metal);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-family: var(--font-mono);
}

.fqs-val {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.fqs-divider {
  width: 1px;
  background: var(--line);
  flex-shrink: 0;
  align-self: stretch;
}

/* Ficha grid — updated layout */
.ficha-layout {
  display: flex;
  align-items: flex-start;
  gap: var(--s-5);
  padding: var(--s-5) var(--s-6) var(--s-6);
}

.ficha-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

/* Envuelve la card (.ficha-panel) + el CTA de comparar: una sola columna de
   360px del flex de arriba, y el elemento sticky del layout. Sticky acá y no
   en la card para que el botón —que vive fuera de ella, no en su padding— se
   quede fijo junto con la card en vez de desaparecer bajo ella al scrollear.
   align-self:start es obligatorio: sin eso la columna se estira a la altura de
   la fila y el sticky no tiene recorrido. */
.ficha-panel-col {
  position: sticky;
  top: calc(var(--header-h) + var(--s-4));
  flex-shrink: 0;
  width: 360px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/* Ventana más baja que la columna (≈650px entre card y botón): se limita la
   altura de la columna y es LA CARD la que scrollea por dentro, no la columna.
   Así el CTA, que es el último hijo del flex, queda anclado abajo y sigue
   visible — que scrollee la columna entera lo dejaría igual de escondido que
   antes, solo que dentro de otro contenedor. */
@media (min-width: 901px) and (max-height: 780px) {
  .ficha-panel-col { max-height: calc(100vh - var(--header-h) - var(--s-5)); }
  .ficha-panel-col > .ficha-panel {
    min-height: 0;            /* sin esto un flex item no baja de su contenido */
    flex-shrink: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  .ficha-panel-col > .ficha-compare-cta { flex-shrink: 0; }
}

.ficha-tabs {
  /* No longer needs grid-column */
}

@media (min-width: 901px) {
  /* Reducción sutil del hero de fotos en desktop: se recorta el alto
     (aspect-ratio más panorámico), el ancho se mantiene a lo largo de
     todo .ficha-main como el resto de los componentes. */
  .gallery-main { aspect-ratio: 3 / 2; }
}

/* ── Descripción del vendedor ──────────────────────────────────────────────
   El texto libre del anuncio (campo "Descripción" del wizard, hasta 1.500
   caracteres). Va arriba de los tabs y siempre visible, porque es lo que el
   vendedor escribió a mano y suele traer el detalle que no cabe en ningún
   campo estructurado. */
.ficha-description {
  margin-bottom: var(--s-6);
  padding: var(--s-5);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
}

.ficha-description-title {
  margin: 0 0 var(--s-3);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}

.ficha-description-body {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-soft);
  /* Ancho de lectura: una línea de 100 caracteres cansa, este bloque puede
     traer cinco párrafos seguidos. */
  max-width: 68ch;
}
.ficha-description-body p { margin: 0 0 var(--s-3); }
.ficha-description-body p:last-child { margin-bottom: 0; }

/* Estado colapsado — ~9 líneas. -webkit-line-clamp sigue siendo la única forma
   con soporte real de cortar por LÍNEAS (no por altura fija), y funciona en
   todos los navegadores actuales pese al prefijo. */
.ficha-description-body.is-clamped {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 9;
  overflow: hidden;
}

.ficha-description-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: var(--s-3);
  padding: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
}
.ficha-description-toggle:hover { text-decoration: underline; }
.ficha-description-toggle svg { transition: transform 180ms; }
.ficha-description-toggle.is-expanded svg { transform: rotate(180deg); }

@media (max-width: 540px) {
  .ficha-description { padding: var(--s-4); margin-bottom: var(--s-5); }
  .ficha-description-body { font-size: 13.5px; }
}

/* Spec grid — card style */
.spec-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-2);
}
.spec-category {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  padding: var(--s-4) 0 var(--s-1);
  border-top: 1px solid var(--line);
}
.spec-category:first-child { padding-top: 0; border-top: none; }

.spec-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--s-3) var(--s-4);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  transition: border-color 150ms;
}
.spec-row:hover { border-color: var(--line-strong); }

.spec-row .label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--metal);
  font-family: var(--font-mono);
}

.spec-row .value {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

/* Responsive adjustments for ficha redesign */
@media (max-width: 900px) {
  /* ── Layout base ──
     align-items:stretch corrige el bug donde los hijos no se estiran al ancho
     completo cuando el flex-direction pasa de row (desktop) a column (tablet). */
  .ficha-layout {
    flex-direction: column;
    align-items: stretch;
    padding: var(--s-4) var(--s-5);
    gap: var(--s-5);
  }
  .ficha-main { width: 100%; min-width: 0; }
  .ficha-panel { width: 100%; box-sizing: border-box; padding: var(--s-4); }
  /* Apilado en columna, la card del sidebar y la duplicada de arriba
     (.ficha-panel-top) quedaban las DOS en pantalla, idénticas. Acá manda la
     de arriba —va pegada a la galería, que es donde se busca el precio— así
     que la columna del sidebar se oculta entera, con su CTA de comparar
     incluido: el duplicado de arriba trae el suyo (#ficha-compare-btn-top). */
  .ficha-panel-col { display: none; }
  .ficha-panel-top {
    display: flex;
    border-top: 3px solid var(--accent);
  }
  .ficha-panel-top-col {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
  }

  /* Topbar */
  .ficha-topbar { padding: var(--s-4) var(--s-5); }

  /* Gallery — 16/9 y altura máxima en tablet */
  .gallery-main { aspect-ratio: 16/9; max-height: 380px; border-radius: var(--r-2); }
  .gallery-thumb { width: 68px; height: 52px; }

  /* Tipografía */
  .ficha-model { font-size: 26px; }
  .ficha-price { font-size: 32px; }

  /* Contenido */
  .spec-grid { grid-template-columns: repeat(2, 1fr); }
  .upgrade-grid { grid-template-columns: 1fr; }

  /* Quick stats */
  .fqs-item { min-width: 75px; padding: var(--s-3) var(--s-2); }
  .fqs-val { font-size: 13px; }

  /* Tabs */
  .tabs-nav { gap: var(--s-4); }
  .tab-btn { font-size: 13px; }

  /* Finance */
  .fin-module { grid-template-columns: 1fr; padding: var(--s-5); }
  .fin-headline { font-size: 28px; }
}

@media (max-width: 540px) {
  /* ── Sección raíz ── */
  .ficha-section { padding: 0 0 var(--s-7); overflow-x: clip; }

  /* ── Layout en móvil ──
     Misma corrección de align-items:stretch que en 900px. */
  .ficha-layout {
    flex-direction: column;
    align-items: stretch;
    padding: var(--s-3) var(--s-4);
    gap: var(--s-4);
  }
  .ficha-main { width: 100%; min-width: 0; }

  /* Topbar */
  .ficha-topbar { padding: var(--s-3) var(--s-4); font-size: 12px; }
  .ficha-breadcrumb { display: none; }

  .ficha-model { font-size: 20px; }
  .ficha-variant { font-size: 12px; }
  .ficha-brand { font-size: 10px; }

  /* Gallery — 16/9 compacto en móvil */
  .gallery-main { aspect-ratio: 16/9; max-height: 230px; border-radius: var(--r-2); }
  .gallery-thumb { width: 56px; height: 42px; border-radius: 4px; }
  .gallery-counter { font-size: 10px; padding: 4px 8px; bottom: 10px; right: 10px; }

  /* ── Panel lateral → bloque full-width en móvil ── */
  .ficha-panel {
    width: 100%;
    box-sizing: border-box;
    padding: var(--s-4);
    gap: var(--s-3);
    border-radius: var(--r-2);
  }
  .ficha-price { font-size: 26px; }
  .ficha-price .currency { font-size: 14px; }
  .ficha-price-block { flex-direction: column; align-items: flex-start; gap: var(--s-2); }
  .ficha-cuota-pill { text-align: left; }
  .ficha-cuota-pill .value { font-size: 16px; }
  .ficha-seller { padding: var(--s-3); }

  /* Tabs */
  .tabs-nav { gap: var(--s-3); }
  .tab-btn { font-size: 12px; padding: var(--s-3) 0; }

  /* Specs — 1 columna */
  .spec-grid { grid-template-columns: 1fr; gap: var(--s-2); }
  .spec-row { padding: var(--s-3); }
  .spec-row .value { font-size: 13px; }

  /* Finance */
  .fin-module { padding: var(--s-4); gap: var(--s-4); }
  .fin-headline { font-size: 22px; }
  .fin-sub { font-size: 13px; }
  .odometer { font-size: 32px; }
  .odometer .currency { font-size: 15px; }
  .odometer-digit { width: 0.52em; }

  /* Feature chips */
  .feature-chip { font-size: 12px; padding: 6px 12px; }

  /* Similares */
  .similar-section { padding-top: var(--s-5); }
  .similar-title { font-size: 20px; }
}

/* ==========================================================================
   MIS ANUNCIOS — DASHBOARD
   ========================================================================= */

/* Page wrapper */
.dashboard-wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--s-5) var(--s-5) 120px;
}

/* Top bar */
.dashboard-topbar {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s-6);
}
.dashboard-topbar-spacer { flex: 1; }
.dashboard-back {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 500;
  padding: 6px 10px 6px 6px;
  border-radius: var(--r-2);
  transition: all 180ms;
  flex-shrink: 0;
}
.dashboard-back:hover { background: var(--paper-warm); color: var(--ink); }
.dashboard-brand {
  text-transform: lowercase;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.3px;
}
.dashboard-brand span:first-child { color: var(--accent); }
.dashboard-brand-label {
  /* El lowercase es solo para el logotipo; el nombre de la sección
     ("· Mis anuncios", "· Wallet") conserva su capitalización. */
  text-transform: none;
  font-weight: 500;
  font-size: 14px;
  color: var(--ink-soft);
}

/* Banner de acceso rápido solo para desarrollo — permite previsualizar el
   dashboard de vendedor registrado sin pasar por el flujo real de upgrade. */
.dash-dev-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-3);
  background: rgba(240, 168, 58, 0.1);
  border: 1px dashed var(--amber);
  border-radius: var(--r-2);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-5);
}
.dash-dev-banner-tag {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--amber);
}
.dash-dev-banner-btn {
  background: none;
  border: 1px solid var(--amber);
  color: var(--amber);
  border-radius: var(--r-2);
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 150ms, color 150ms;
}
.dash-dev-banner-btn:hover { background: var(--amber); color: var(--paper-deep); }
.dash-dev-banner-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* El mismo banner dentro del wizard de venta: ahí el contenedor tiene su
   propio ancho máximo, así que se centra con el resto del formulario. */
.sell-dev-banner {
  max-width: 960px;
  margin: 0 auto var(--s-5);
}

/* Profile header */
.dash-profile-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}
.dash-profile-left { display: flex; flex-direction: column; gap: var(--s-2); }
.dash-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.3px;
  margin: 0;
}
.dash-profile-meta { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.dash-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  letter-spacing: 0.1px;
}
.dash-type-badge.individual {
  background: rgba(91, 156, 246, 0.12);
  color: var(--finance);
  border: 1px solid rgba(91, 156, 246, 0.25);
}
.dash-type-badge.recurrente {
  background: rgba(39, 194, 128, 0.12);
  color: var(--verified);
  border: 1px solid rgba(39, 194, 128, 0.25);
}
.dash-slots-label {
  font-size: 13px;
  color: var(--metal);
}
.btn-dash-publish {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: var(--r-2);
  border: none;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 180ms;
}
.btn-dash-publish:hover { background: var(--accent-deep); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(232,97,78,0.3); }

/* Acciones del header del dashboard registrado: publicar (primaria) +
   exportar (secundaria). Se apilan en móvil junto con el resto del bloque. */
.dr-welcome-actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-shrink: 0;
}

/* Exportar anuncios — secundaria (outline) para no competir con Publicar. */
.btn-dash-export {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 600;
  padding: 9px 14px;
  border-radius: var(--r-2);
  border: 1px solid var(--line-strong);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 180ms;
}
.btn-dash-export:hover {
  color: var(--ink);
  border-color: var(--metal);
  background: var(--paper-deep);
}

/* ── Individual grid ── */
.dash-individual-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}

/* Vehicle card */
.dash-card {
  background: var(--paper-deep);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-3);
  overflow: hidden;
  text-align: left;
  position: relative;
}
.dash-card-img {
  width: 100%;
  aspect-ratio: 16/9;
  background-size: cover;
  background-position: center;
  background-color: var(--paper);
  position: relative;
}
.dash-card-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.dash-card-badge.is-active   { background: rgba(39,194,128,0.9);  color: #fff; }
.dash-card-badge.is-paused   { background: rgba(120,120,140,0.9); color: #fff; }
.dash-card-badge.is-pending  { background: rgba(91,156,246,0.9);  color: #fff; }
.dash-card-badge.is-expired  { background: rgba(229,72,77,0.92);  color: #fff; }
.dash-card-badge.is-finished { background: rgba(70,70,85,0.92);   color: #fff; }
.dash-card-badge.is-draft    { background: rgba(183,141,60,0.92); color: #fff; }

/* Card body — texto del vehículo */
.dash-card-body {
  padding: var(--s-3) var(--s-4);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.dash-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  max-width: 100%;
}
.dash-card-price {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  font-family: var(--font-mono);
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-card-meta {
  font-size: 11px;
  color: var(--metal);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}
.dash-card-visits {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--ink-soft);
  margin-top: 2px;
}
.dash-card-visits svg { flex-shrink: 0; opacity: 0.7; }

/* Vencimiento — misma convención de color rojo/amarillo/verde que .dr-expiry-pill */
.dash-card-expiry { margin-top: 4px; }
.dash-expiry-pill {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  overflow: hidden;
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  text-overflow: ellipsis;
  letter-spacing: 0.01em;
}
.dash-expiry-pill.is-danger  { background: rgba(229, 72, 77, 0.14);  color: #f17178; border: 1px solid rgba(229, 72, 77, 0.3); }
.dash-expiry-pill.is-warning { background: rgba(240, 168, 58, 0.14); color: var(--amber);    border: 1px solid rgba(240, 168, 58, 0.3); }
.dash-expiry-pill.is-ok      { background: rgba(39, 194, 128, 0.12); color: var(--verified); border: 1px solid rgba(39, 194, 128, 0.28); font-weight: 600; }

/* Sección "Borradores" — publicaciones sin terminar de publicar */
.dash-drafts-section {
  margin-top: var(--s-7);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
}
.dash-drafts-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 2px;
}
.dash-drafts-sub {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0 0 var(--s-4);
}
.dash-drafts-grid { grid-template-columns: repeat(3, 1fr); }
.dash-card--draft { border-style: dashed; }
.dash-card-img--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--metal);
}

/* Slot para agregar nuevo anuncio */
.dash-card-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  min-height: 160px;
  border: 2px dashed var(--line-strong) !important;
  background: transparent !important;
  color: var(--ink-soft);
  padding: var(--s-5);
  text-align: center;
  transform: none !important;
  box-shadow: none !important;
}
.dash-card-add:hover {
  border-color: var(--accent) !important;
  color: var(--accent);
  background: rgba(232, 97, 78, 0.04) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 16px rgba(232, 97, 78, 0.12) !important;
}
.dash-card-add svg { opacity: 0.5; }
.dash-card-add span { font-size: 13px; font-weight: 600; }
.dash-card-add small { font-size: 11px; color: var(--metal); }

/* Slot bloqueado */
.dash-card-locked {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  min-height: 160px;
  border: 1px dashed var(--line) !important;
  background: transparent !important;
  color: var(--metal);
  padding: var(--s-5);
  text-align: center;
  opacity: 0.55;
  cursor: default;
}
.dash-card-locked span { font-size: 13px; font-weight: 500; }
.dash-card-locked small { font-size: 11px; }

/* CTA de upgrade (cuando se llega al límite) */
.dash-upgrade-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: rgba(232, 97, 78, 0.06);
  border: 1px solid rgba(232, 97, 78, 0.22);
  border-radius: var(--r-3);
  margin-top: var(--s-4);
}
.dash-upgrade-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.dash-upgrade-text strong { font-size: 14px; font-weight: 700; color: var(--ink); }
.dash-upgrade-text span {
  font-size: 13px;
  color: var(--metal);
  line-height: 1.4;
}
.btn-dash-upgrade {
  flex-shrink: 0;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--r-2);
  font-size: 13px;
  font-weight: 600;
  padding: 9px 16px;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font-sans);
  transition: background 150ms;
}
.btn-dash-upgrade:hover { background: var(--accent-deep); }

/* ── Alerta informativa de upgrade a Vendedor Registrado ── */
.dash-upgrade-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: rgba(91, 156, 246, 0.07);
  border: 1px solid rgba(91, 156, 246, 0.22);
  border-left: 4px solid var(--finance);
  border-radius: var(--r-3);
  margin-bottom: var(--s-5);
}
.dash-alert-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(91, 156, 246, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--finance);
  margin-top: 1px;
}
.dash-alert-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.dash-alert-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}
.dash-alert-sub {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.55;
}
.dash-alert-sub strong { color: var(--finance); font-weight: 600; }
.dash-alert-actions {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-3);
  flex-wrap: wrap;
}
.btn-alert-upgrade {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--finance);
  color: #fff;
  border: none;
  border-radius: var(--r-2);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  cursor: pointer;
  font-family: var(--font-sans);
  letter-spacing: -0.01em;
  transition: opacity 150ms, transform 150ms;
  white-space: nowrap;
}
.btn-alert-upgrade:hover { opacity: 0.88; transform: translateY(-1px); }
.btn-alert-learn {
  background: none;
  border: none;
  font-size: 13px;
  color: var(--finance);
  cursor: pointer;
  text-decoration: underline;
  font-family: var(--font-sans);
  padding: 0;
}
.btn-alert-learn:hover { opacity: 0.75; }

/* ── Promo: destacá tus anuncios (reemplaza upsell a plan recurrente) ── */
.dash-feature-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-3);
  margin-bottom: var(--s-5);
}
.dash-feature-alert .dash-alert-icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  margin-top: 1px;
}
.dash-feature-alert .dash-alert-sub strong { color: var(--accent); font-weight: 600; }
.btn-alert-feature {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent); color: #fff; border: none;
  border-radius: var(--r-2); font-size: 13px; font-weight: 600;
  padding: 8px 14px; cursor: pointer; font-family: var(--font-sans);
  transition: opacity 150ms, transform 150ms; white-space: nowrap;
}
.btn-alert-feature:hover { opacity: 0.9; transform: translateY(-1px); }


/* Botón / chip "Destacar" por tarjeta */
.dash-card-feature-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: var(--r-2); padding: 5px 10px; cursor: pointer;
  transition: all 160ms; font-family: var(--font-sans);
}
.dash-card-feature-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.dash-card-feature-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; color: #c9a84c;
  background: rgba(201,168,76,0.12);
  border: 1px solid rgba(201,168,76,0.4);
  border-radius: var(--r-2); padding: 5px 10px;
}
.dash-card-feature-flag {
  position: absolute; top: 8px; right: 8px;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 700; color: #241900;
  background: #e7c15a; padding: 2px 8px; border-radius: var(--r-pill);
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.dash-card--featured { border: 1.5px solid rgba(201,168,76,0.55); }
/* Etiqueta temporal tras pagar un destacado, hasta que se acredita. */
.dash-card-feature-flag--processing { background: var(--paper); color: var(--ink); border: 1px solid var(--line-strong); }
.dash-flag-spinner {
  width: 9px; height: 9px;
  border: 1.5px solid var(--line-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: dash-flag-spin 700ms linear infinite;
}
@keyframes dash-flag-spin { to { transform: rotate(360deg); } }

/* ── Responsive del dashboard ── */
@media (max-width: 700px) {
  .dashboard-wrap { padding: var(--s-4) var(--s-4) 80px; }
  .dash-individual-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
  .dash-profile-hd { flex-direction: column; align-items: flex-start; }
  .btn-dash-publish { width: 100%; justify-content: center; }
  .dr-welcome-actions { flex-direction: column; align-items: stretch; width: 100%; }
  .btn-dash-export { width: 100%; justify-content: center; }
  .dash-upgrade-cta { flex-direction: column; align-items: flex-start; gap: var(--s-3); }
  .btn-dash-upgrade { width: 100%; justify-content: center; }
  .dash-upgrade-alert { flex-direction: column; }
  .dash-alert-icon { display: none; }
}
@media (max-width: 420px) {
  .dash-individual-grid { grid-template-columns: 1fr; }
  .dash-card-add, .dash-card-locked { min-height: 120px; }
}

/* ============================================================================
   DASHBOARD INDIVIDUAL — tarjeta con botón editar + slot upgrade
   ========================================================================= */

/* Botón editar en cada tarjeta */
.dash-card-footer {
  padding: 8px var(--s-4) var(--s-3);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 6px var(--s-2);
}
.dash-card-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  padding: 5px 10px;
  cursor: pointer;
  transition: all 160ms;
  font-family: var(--font-sans);
}
.dash-card-edit-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(232, 97, 78, 0.07);
}
.dash-card-edit-btn svg { opacity: 0.75; flex-shrink: 0; }
.dash-card-edit-btn:hover svg { opacity: 1; }

/* Resto de acciones por tarjeta (Pausar/Activar/Eliminar/Renovar/Continuar)
   — misma pastilla que .dash-card-edit-btn, con variantes de color para
   comunicar peligro (eliminar) o urgencia positiva (renovar/activar),
   igual que .ea-status-action en la vista de edición. */
.dash-card-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  padding: 5px 10px;
  cursor: pointer;
  transition: all 160ms;
  font-family: var(--font-sans);
}
.dash-card-action:hover { color: var(--ink); border-color: var(--ink-soft); }
.dash-card-action svg { opacity: 0.75; flex-shrink: 0; }
.dash-card-action:hover svg { opacity: 1; }
.dash-card-action--danger { border-color: rgba(229,72,77,0.35); color: #f17178; }
.dash-card-action--danger:hover { background: rgba(229,72,77,0.12); border-color: rgba(229,72,77,0.5); color: #f17178; }
.dash-card-action--feature { border-color: rgba(217,157,15,0.4); color: var(--amber, #d99d0f); }
.dash-card-action--feature:hover { background: rgba(217,157,15,0.14); border-color: rgba(217,157,15,0.55); color: var(--amber, #d99d0f); }
.dash-card-action--feature svg { opacity: 1; }
.dash-card-action--primary {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(232,97,78,0.08);
  font-weight: 700;
}
.dash-card-action--primary:hover { background: var(--accent); color: #fff; }
.dash-card-action--primary:hover svg { opacity: 1; }

/* Slot 6 bloqueado con upgrade */
.dash-card-locked-upgrade {
  min-height: 200px;
  opacity: 1 !important;
  cursor: default;
  background: linear-gradient(135deg, rgba(183, 141, 60, 0.06) 0%, rgba(183, 141, 60, 0.02) 100%) !important;
  border: 1.5px dashed rgba(183, 141, 60, 0.4) !important;
}
.dash-locked-upgrade-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: var(--s-4);
  text-align: center;
  width: 100%;
}
.dash-locked-star {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(183, 141, 60, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c9a84c;
  margin-bottom: 2px;
}
.dash-locked-upgrade-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.dash-locked-upgrade-msg {
  font-size: 11px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0;
  max-width: 160px;
}
.dash-locked-upgrade-msg strong { color: #c9a84c; }
.dash-locked-upgrade-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 700;
  color: #c9a84c;
  background: rgba(183, 141, 60, 0.12);
  border: 1px solid rgba(183, 141, 60, 0.35);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: all 160ms;
  font-family: var(--font-sans);
  letter-spacing: 0.02em;
}
.dash-locked-upgrade-btn:hover {
  background: rgba(183, 141, 60, 0.22);
  border-color: rgba(183, 141, 60, 0.6);
}

/* Variante ámbar de la card de upgrade — comprar más espacios (vendedor
   registrado). Misma estructura que la card de "destacar", tematizada con
   --amber para casar con el indicador de espacios. Definida después de la
   base para ganar el override de los !important de fondo/borde. */
.dash-card-buyspaces {
  background: linear-gradient(135deg, color-mix(in srgb, var(--amber) 9%, transparent) 0%, color-mix(in srgb, var(--amber) 2%, transparent) 100%) !important;
  border: 1.5px dashed color-mix(in srgb, var(--amber) 45%, transparent) !important;
}
.dash-card-buyspaces .dash-locked-star {
  background: color-mix(in srgb, var(--amber) 16%, transparent);
  color: var(--amber);
}
.dash-card-buyspaces .dash-locked-upgrade-msg strong { color: var(--amber); }
.dash-card-buyspaces .dash-locked-upgrade-btn {
  color: var(--amber);
  background: color-mix(in srgb, var(--amber) 12%, transparent);
  border-color: color-mix(in srgb, var(--amber) 35%, transparent);
}
.dash-card-buyspaces .dash-locked-upgrade-btn:hover {
  background: color-mix(in srgb, var(--amber) 22%, transparent);
  border-color: color-mix(in srgb, var(--amber) 60%, transparent);
}

/* ============================================================================
   DASHBOARD RECURRENTE — saludo, vigencia, stats, tabla de anuncios
   ========================================================================= */

.dashboard-wrap--wide { max-width: 1240px; }

/* Homologa el tamaño de las cards del vendedor registrado con las del
   individual. El contenedor --wide es más ancho (1240 vs 900), así que las
   mismas 3 columnas fijas estiraban las cards (~386px vs ~273px). Con auto-fill
   se mantiene el mismo ancho de card que en individual y el grid agrega
   columnas según el espacio. Solo desktop: en ≤900px mandan las media queries
   base de .dash-individual-grid (2 y 1 columnas). */
@media (min-width: 901px) {
  .dashboard-wrap--wide .dash-individual-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }
}

/* Estado (punto de color reutilizado en tabla y panel lateral) */
.dash-status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 5px;
  flex-shrink: 0;
  background: var(--metal);
}
.dash-status-dot.is-active  { background: var(--verified); }
.dash-status-dot.is-paused  { background: var(--metal); }
.dash-status-dot.is-pending { background: var(--finance); }

/* ── Bloque de bienvenida ── */
.dr-welcome {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  flex-wrap: wrap;
  padding: var(--s-5);
  margin-bottom: var(--s-5);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-3);
}
.dr-welcome-id {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex: 1;
  min-width: 220px;
}
.dr-welcome-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--verified), var(--verified-soft));
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
}
.dr-welcome-title {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin: 0 0 4px;
}
.dr-welcome-email {
  font-size: 13px;
  color: var(--ink-soft);
  font-family: var(--font-mono);
}
.dr-account-validity {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s-3) var(--s-5);
  border-left: 1px solid var(--line-strong);
  border-right: 1px solid var(--line-strong);
}
.dr-account-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--metal);
}
.dr-account-date {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}
.dr-account-sub {
  font-size: 11px;
  color: var(--metal);
}

/* Saldo wallet — mismo bloque bordeado que "Vigencia de cuenta", exclusivo
   del perfil recurrente/registrado (ver renderDashRecurrente). */
.dr-wallet-balance { border-left: none; }
.dr-wallet-topup-link {
  align-self: flex-start;
  margin-top: 1px;
  padding: 0;
  border: none;
  background: none;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  transition: opacity 150ms;
}
.dr-wallet-topup-link:hover { opacity: 0.75; text-decoration: underline; }

/* ── Tira de estadísticas (compartida con el dashboard individual) ── */
/* Resumen del panel del vendedor registrado: solo dos métricas
   (anuncios publicados · visitas totales), a media caja cada una. */
.dash-stats-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}
.dash-stat-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--s-4);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
}
.dash-stat-num {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.dash-stat-lbl {
  font-size: 12px;
  color: var(--metal);
}

/* ── Barra de selección / renovación masiva ── */
.dr-bulk-bar {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-3);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
}
.dr-select-all {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
}
.dr-select-all input { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; }
.dr-selected-count {
  font-size: 12px;
  color: var(--metal);
  font-family: var(--font-mono);
}
.dr-btn-renew-selected {
  margin-left: auto;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 600;
  padding: 9px 18px;
  cursor: pointer;
  transition: all 160ms;
  font-family: var(--font-sans);
}
.dr-btn-renew-selected:hover:not(:disabled) { background: var(--accent-deep); transform: translateY(-1px); }
.dr-btn-renew-selected:disabled {
  background: var(--paper-warm);
  color: var(--metal);
  cursor: not-allowed;
}

/* ── Tabla de anuncios ── */
.dr-table {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
}
.dr-table-head,
.dr-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 2.2fr) minmax(0, 0.55fr) minmax(0, 1fr) minmax(0, 0.95fr) minmax(0, 1.2fr) minmax(0, 0.75fr) minmax(0, 1.7fr) minmax(0, 0.95fr);
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
}
.dr-table-head {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--metal);
  border-bottom: 1px solid var(--line-strong);
  background: var(--paper-deep);
}
.dr-table-body { display: flex; flex-direction: column; }
.dr-row {
  background: none;
  border: none;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background 150ms;
  width: 100%;
  text-align: left;
  font-family: var(--font-sans);
  color: var(--ink);
}
.dr-row:last-child { border-bottom: none; }
.dr-row:hover { background: var(--paper-warm); }
.dr-row.is-selected { background: rgba(232, 97, 78, 0.07); box-shadow: inset 3px 0 0 var(--accent); }

.dr-col-check { display: flex; align-items: center; justify-content: center; }
.dr-row-check { width: 15px; height: 15px; cursor: pointer; accent-color: var(--accent); }

.dr-col-vehicle { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.dr-row-img {
  width: 52px;
  height: 40px;
  border-radius: var(--r-1);
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}
.dr-row-vehicle-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dr-row-vehicle-text strong { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-row-vehicle-text small { display: flex; align-items: center; font-size: 11.5px; color: var(--metal); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.dr-col-year, .dr-col-price { font-size: 13px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.dr-col-plate { font-size: 12px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

.dr-col-visits { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--ink-soft); min-width: 0; overflow: hidden; }
.dr-col-visits svg { opacity: 0.65; flex-shrink: 0; }

/* Vencimiento — convención de color rojo/amarillo/verde */
.dr-col-expiry { min-width: 0; overflow: hidden; }
.dr-expiry-pill {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  overflow: hidden;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  text-overflow: ellipsis;
  letter-spacing: 0.01em;
}
.dr-expiry-pill.is-danger  { background: rgba(229, 72, 77, 0.14);  color: #f17178; border: 1px solid rgba(229, 72, 77, 0.3); }
.dr-expiry-pill.is-warning { background: rgba(240, 168, 58, 0.14); color: var(--amber);    border: 1px solid rgba(240, 168, 58, 0.3); }
.dr-expiry-pill.is-ok      { background: rgba(39, 194, 128, 0.12); color: var(--verified); border: 1px solid rgba(39, 194, 128, 0.28); font-weight: 600; }

/* Destacado */
.dr-col-featured { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.dr-featured-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #c9a84c;
  background: rgba(183, 141, 60, 0.14);
  border: 1px solid rgba(183, 141, 60, 0.32);
  border-radius: var(--r-pill);
  padding: 4px 9px;
  white-space: nowrap;
}
.dr-not-featured {
  font-size: 11px;
  color: var(--metal);
  white-space: nowrap;
}
.dr-btn-feature {
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: var(--r-2);
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font-sans);
  transition: all 160ms;
}
.dr-btn-feature.is-highlight {
  background: transparent;
  color: var(--accent);
  border: 1px solid rgba(232, 97, 78, 0.4);
}
.dr-btn-feature.is-highlight:hover { background: rgba(232, 97, 78, 0.1); }
.dr-btn-feature.is-renew {
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
}
.dr-btn-feature.is-renew:hover { color: var(--ink); border-color: var(--ink-soft); }

.dr-col-actions { display: flex; justify-content: flex-end; }

/* ── Responsive: dashboard recurrente ── */
@media (max-width: 700px) {
  .dashboard-wrap--wide { max-width: 100%; }
  .dr-welcome { flex-direction: column; align-items: stretch; gap: var(--s-3); }
  .dr-account-validity { border-left: none; border-right: none; border-top: 1px solid var(--line-strong); padding: var(--s-3) 0; }
  /* Las dos métricas se apilan en móvil — a 2 columnas el número
     y su etiqueta quedan demasiado apretados. */
  .dash-stats-strip { grid-template-columns: 1fr; }
  .dr-bulk-bar { flex-wrap: wrap; }
  .dr-btn-renew-selected { margin-left: 0; width: 100%; order: 3; }

  /* Tabla → tarjetas apiladas */
  .dr-table-head { display: none; }
  .dr-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-width: 0;
    row-gap: var(--s-2);
    column-gap: var(--s-3);
  }
  .dr-col-check { width: 20px; flex-basis: 20px; }
  .dr-col-vehicle { flex: 1 1 100%; min-width: 0; }
  .dr-col-year, .dr-col-price, .dr-col-plate {
    flex: 0 0 auto;
    font-size: 12px;
  }
  .dr-col-year::before { content: 'Año '; color: var(--metal); font-weight: 400; }
  .dr-col-price::before { content: 'Precio '; color: var(--metal); font-weight: 400; }
  .dr-col-plate::before { content: 'Placa '; color: var(--metal); }
  .dr-col-expiry, .dr-col-visits { flex: 0 0 auto; }
  .dr-col-featured { flex-basis: 100%; }
  .dr-col-actions { flex-basis: 100%; justify-content: flex-start; }
}

/* ============================================================================
   OFERTAS DEL DÍA — activar/editar precio y fecha de oferta
   ========================================================================= */
.of-sub {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 4px;
  max-width: 520px;
}

.of-table {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
}
.of-table-head,
.of-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 0.85fr) minmax(0, 1fr) minmax(0, 0.45fr) minmax(0, 0.8fr) minmax(0, 1.05fr) minmax(0, 1.75fr) minmax(0, 1.5fr);
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
}
.of-table-head {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--metal);
  border-bottom: 1px solid var(--line-strong);
  background: var(--paper-deep);
}
.of-table-body { display: flex; flex-direction: column; }
.of-row {
  border-bottom: 1px solid var(--line);
  transition: background 150ms;
}
.of-row:last-child { border-bottom: none; }
.of-row:hover { background: var(--paper-warm); }

.of-row-img {
  width: 36px;
  height: 36px;
  border-radius: var(--r-1);
  background-size: cover;
  background-position: center;
}

.of-col-brand, .of-col-model { font-size: 13px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.of-col-year, .of-col-price { font-size: 13px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.of-col-until { font-size: 12.5px; color: var(--ink-soft); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Vigencia de la oferta: desde–hasta en dos líneas, cada una con su etiqueta.
   Anula el nowrap/ellipsis heredado de .of-col-until, que era para una sola
   fecha. */
.of-range {
  display: flex;
  flex-direction: column;
  gap: 2px;
  white-space: normal;
}
.of-range-part {
  display: flex;
  gap: 5px;
  align-items: baseline;
  white-space: nowrap;
}
.of-range-part em {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--metal);
  flex: 0 0 34px;
}
/* Edición: los dos <input type="date"> apilados y etiquetados igual que en la
   vista de solo lectura, para que se lean como el mismo dato. */
.of-range-inputs {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.of-range-field {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.of-range-field em {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--metal);
  flex: 0 0 34px;
}
.of-range-field .of-input { flex: 1 1 auto; min-width: 0; }

.of-offer-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--accent);
  background: rgba(232, 97, 78, 0.12);
  border: 1px solid rgba(232, 97, 78, 0.3);
  border-radius: var(--r-pill);
  padding: 4px 10px;
  white-space: nowrap;
}
.of-no-offer { font-size: 12px; color: var(--metal); }

.of-col-actions { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.of-btn-edit, .of-btn-remove, .of-btn-save, .of-btn-cancel {
  font-size: 11.5px;
  font-weight: 600;
  padding: 6px 11px;
  border-radius: var(--r-2);
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font-sans);
  transition: all 160ms;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.of-btn-edit {
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
}
.of-btn-edit:hover { color: var(--ink); border-color: var(--ink-soft); }
.of-btn-remove {
  background: transparent;
  color: var(--accent);
  border: 1px solid rgba(232, 97, 78, 0.35);
}
.of-btn-remove:hover { background: rgba(232, 97, 78, 0.08); }

/* Fila en modo edición */
.of-row.is-editing { background: rgba(232, 97, 78, 0.05); }
.of-edit-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.of-edit-field label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--metal);
}
.of-input {
  width: 100%;
  padding: 7px 9px;
  background: var(--paper-deep);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-1);
  color: var(--ink);
  font-size: 12.5px;
  font-family: var(--font-mono);
}
.of-input:focus { outline: none; border-color: var(--accent); }
.of-edit-actions { align-items: flex-end; }
.of-btn-save {
  background: var(--accent);
  color: #fff;
  border: none;
}
.of-btn-save:hover { background: var(--accent-deep); }
.of-btn-cancel {
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
}
.of-btn-cancel:hover { color: var(--ink); border-color: var(--ink-soft); }

/* ── Responsive: tabla de ofertas → tarjetas apiladas ── */
@media (max-width: 760px) {
  .of-table-head { display: none; }
  .of-row, .of-row.is-editing {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: var(--s-2);
    column-gap: var(--s-3);
  }
  .of-col-veh { flex: 0 0 auto; }
  .of-col-brand::before { content: ''; }
  .of-col-brand, .of-col-model { flex: 0 0 auto; }
  .of-col-year::before { content: 'Año '; color: var(--metal); font-weight: 400; }
  .of-col-price::before { content: 'Precio '; color: var(--metal); font-weight: 400; }
  .of-col-offer, .of-col-until, .of-col-actions { flex-basis: 100%; }
  .of-edit-field { flex-basis: 100%; }
  .of-edit-actions { flex-basis: 100%; justify-content: flex-start; }
}

/* ============================================================================
   VISTA: EDITAR ANUNCIO
   ========================================================================= */

.view#view-editar-anuncio {
  background: var(--bg);
  min-height: 100vh;
}
.ea-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 0 80px;
}

/* Top bar */
.ea-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--line);
  background: var(--paper-deep);
  position: sticky;
  top: 0;
  z-index: 10;
}
.ea-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: var(--r-2);
  transition: all 160ms;
  font-family: var(--font-sans);
  flex-shrink: 0;
}
.ea-back:hover { color: var(--ink); background: var(--paper); }
.ea-topbar-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  font-family: var(--font-display);
}
.ea-topbar-spacer { flex: 0 0 100px; }

/* ==========================================================================
   DESTACAR ANUNCIOS — listado seleccionable + resumen de costo
   ========================================================================= */
.dz-body { padding: var(--s-5); }
.dz-intro { margin-bottom: var(--s-5); }
.dz-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 3.5vw, 28px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}
.dz-sub { color: var(--ink-soft); font-size: 14px; line-height: 1.5; margin: 0; max-width: 640px; }

.dz-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--s-5);
  align-items: start;
}
.dz-list { display: flex; flex-direction: column; gap: var(--s-3); }

/* Destacar usa el ancho estándar del sitio (--max-w con gutter --s-6, igual que
   el header y las demás vistas) en vez de los 760px del editor de anuncios.
   Solo esta vista: el editor y la pasarela comparten .ea-wrap y siguen angostos.
   La ruta (miga de pan) y el título arrancan en el mismo borde izquierdo. */
#view-destacar .ea-wrap {
  max-width: var(--max-w);
  padding-inline: var(--s-6);
  padding-top: var(--s-5);
}
#view-destacar .dz-breadcrumb { margin-bottom: var(--s-4); }
#view-destacar .dz-body { padding: 0; }
#view-destacar .dz-intro { margin-bottom: var(--s-5); }
#view-destacar .dz-layout { grid-template-columns: minmax(0, 1fr) 360px; gap: var(--s-6); }
/* Una sola columna: cada tarjeta mide lo que su contenido, compacta en reposo
   y, al seleccionarla, SOLO esa se expande para mostrar Destacado / Súper
   Destacado. */
#view-destacar .dz-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
#view-destacar .dz-item { align-content: start; row-gap: var(--s-3); }
#view-destacar .dz-item-tiers {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  margin-top: 0;
}
#view-destacar .dz-item-tiers.is-hidden { display: none; }
#view-destacar .dz-tier {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  padding: 8px 12px;
}
@media (max-width: 820px) {
  #view-destacar .ea-wrap { padding-inline: var(--s-4); }
  #view-destacar .dz-layout { grid-template-columns: 1fr; }
}

.dz-item {
  display: grid;
  grid-template-columns: auto 96px 1fr;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-3) var(--s-4);
  background: var(--paper);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-3);
  cursor: pointer;
  transition: border-color 160ms, background 160ms;
}
.dz-item:hover { border-color: var(--accent); }
.dz-item.is-selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--paper)); }
.dz-item-check {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--line-strong);
  position: relative; flex: none;
  transition: border-color 160ms, background 160ms;
}
.dz-item.is-selected .dz-item-check { border-color: var(--accent); background: var(--accent); }
.dz-item.is-selected .dz-item-check::after {
  content: ""; position: absolute; left: 6px; top: 3px;
  width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.dz-item-thumb {
  width: 96px; height: 64px; border-radius: var(--r-2);
  background-size: cover; background-position: center; background-color: var(--paper-deep);
  flex: none;
}
.dz-item-info { min-width: 0; }
.dz-item-title { font-size: 14px; font-weight: 700; color: var(--ink); }
.dz-item-price { font-size: 13px; font-weight: 700; color: var(--accent); margin: 1px 0; }
.dz-item-meta { font-size: 12px; color: var(--ink-soft); }
.dz-item-tiers { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.dz-item-tiers.is-hidden { display: none; }
.dz-tier {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: var(--r-2);
  border: 1px solid var(--line-strong); background: var(--paper-deep);
  cursor: pointer; font-size: 12px; transition: border-color 150ms, background 150ms;
}
.dz-tier input { display: none; }
.dz-tier.is-active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.dz-tier-label { font-weight: 600; color: var(--ink); }
.dz-tier-price { font-family: var(--font-mono); color: var(--ink-soft); }
.dz-tier.is-active .dz-tier-price { color: var(--accent); }

.dz-item--done { cursor: default; grid-template-columns: 96px 1fr auto; opacity: 0.85; }
.dz-item--done:hover { border-color: var(--line-strong); }
.dz-item-done-tag {
  font-size: 11px; font-weight: 700; color: #c9a84c;
  background: rgba(201,168,76,0.12); border: 1px solid rgba(201,168,76,0.4);
  border-radius: var(--r-pill); padding: 4px 10px; white-space: nowrap;
}

/* Resumen / carrito */
.dz-cart {
  position: sticky; top: 80px;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-3);
  padding: var(--s-5);
}
.dz-cart-head {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-size: 15px; font-weight: 700;
  color: var(--ink); margin-bottom: var(--s-4);
}
.dz-cart-head svg { stroke: var(--accent); }
.dz-cart-empty { font-size: 13px; color: var(--metal); padding: var(--s-2) 0; }
.dz-cart-items { display: flex; flex-direction: column; gap: var(--s-2); }
.dz-cart-item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-3); background: var(--paper-warm);
  border: 1px solid var(--line); border-radius: var(--r-2);
}
.dz-cart-item-name { font-size: 13px; font-weight: 500; color: var(--ink); display: flex; flex-direction: column; }
.dz-cart-item-name em { font-style: normal; font-size: 11px; color: var(--ink-soft); }
.dz-cart-item-right { display: flex; align-items: center; gap: var(--s-3); flex-shrink: 0; }
.dz-cart-item-price { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--ink); }
.dz-cart-item-remove {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: transparent; color: var(--metal);
  font-size: 11px; line-height: 1; cursor: pointer; transition: all 150ms;
}
.dz-cart-item-remove:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.dz-cart-total-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--line);
  font-size: 14px; color: var(--ink-soft);
}
.dz-cart-total-row strong { font-family: var(--font-mono); font-size: 20px; font-weight: 700; color: var(--accent); }
/* ============================================================================
   LIQUIDACIÓN — subtotal · IVA · total
   Bloque compartido por todos los cobros del marketplace (mejoras, destacar,
   plan de espacios, recarga de wallet y pagos mixtos). Ver liquidationHTML()
   en app.js: un solo generador para que el formato no se desincronice.
   ========================================================================= */
.liq {
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}
.liq-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 5px 0;
  font-size: 13px;
  color: var(--ink-soft);
}
.liq-row strong {
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
/* Total del servicio: la línea que manda visualmente. */
.liq-row--total {
  margin-top: 4px;
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.liq-row--total strong {
  font-size: 19px;
  font-weight: 700;
  color: var(--accent);
}
/* Pago mixto: crédito aplicado y saldo a cobrar con tarjeta. */
.liq-row--credit strong { color: var(--verified); }
.liq-row--wallet-price strong { color: var(--verified); }
.liq-row--due {
  margin-top: 2px;
  padding-top: var(--s-3);
  border-top: 1px dashed var(--line);
  font-weight: 600;
  color: var(--ink);
}
.liq-row--due strong { font-size: 16px; color: var(--accent); }

@media (max-width: 420px) {
  .liq-row { font-size: 12.5px; }
  .liq-row--total strong { font-size: 17px; }
  .liq-row--due strong { font-size: 15px; }
}

.dz-confirm {
  width: 100%; margin-top: var(--s-4);
  padding: 12px var(--s-4); border: none; border-radius: var(--r-3);
  background: var(--accent); color: #fff; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: background 160ms, opacity 160ms; font-family: var(--font-sans);
}
.dz-confirm:hover:not(:disabled) { background: var(--accent-deep); }
.dz-confirm:disabled { opacity: 0.5; cursor: not-allowed; }
.dz-cart-note { font-size: 11px; color: var(--ink-soft); text-align: center; margin: var(--s-3) 0 0; line-height: 1.4; }

@media (max-width: 820px) {
  .dz-layout { grid-template-columns: 1fr; }
  .dz-cart { position: static; }
}
@media (max-width: 480px) {
  .dz-item { grid-template-columns: auto 72px 1fr; gap: var(--s-3); }
  .dz-item-thumb { width: 72px; height: 52px; }
}

/* ==========================================================================
   PAGO DE MEJORAS — checkout de mejoras (destacado / badges de combo / etc.)
   ========================================================================= */
.view#view-pago-mejoras { background: var(--bg); min-height: 100vh; }
.pm-body { padding: var(--s-5); }

.pm-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--s-5);
  align-items: start;
}
.pm-form-col { display: flex; flex-direction: column; gap: var(--s-5); min-width: 0; }

.pm-section {
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-3);
  padding: var(--s-5);
}
.pm-section-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 var(--s-4);
}
.pm-section .terms-checkbox-row { margin-bottom: 0; }
.pm-billing-fields { margin-top: var(--s-4); display: flex; flex-direction: column; gap: var(--s-4); }
.pm-billing-fields[hidden] { display: none; }

/* Selector "Tarjeta" vs "Saldo wallet" — solo perfil recurrente con saldo
   disponible (ver showWalletOption en renderPagoMejoras). */
.pm-method-group {
  display: flex;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.pm-method-card { flex: 1; }
.pm-method-card > span { width: 100%; }
/* ── Formulario de tarjeta del proveedor de pago (réplica) ──────────────────
   Diseño fijo del proveedor externo: no usa los tokens del sitio a propósito
   (panel oscuro con campos blancos aun en tema claro). Todo vive bajo .pcf. */
.pcf { max-width: 400px; font-family: var(--font-sans); }
.pcf-bar {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--s-3);
}
.pcf-frame {
  background: #2b2d42;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
}
.pcf-band { height: 28px; background: #fff; }
.pcf-panel { padding: var(--s-5) var(--s-5) var(--s-4); color: #fff; }
.pcf-lang {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-3);
  font-size: 11px;
  font-weight: 700;
  margin-bottom: var(--s-4);
}
.pcf-lang select {
  font-size: 13px;
  padding: 4px 8px;
  border: 1px solid #fff;
  border-radius: 4px;
  background: #fff;
  color: #111;
}
.pcf-mark { display: block; margin: 0 0 var(--s-4) var(--s-4); }
.pcf-merchant {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  margin: 0 0 var(--s-2);
  color: #fff;
}
.pcf-intro { font-size: 11px; line-height: 1.45; margin: 0 0 var(--s-5); color: #fff; }
.pcf-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: var(--s-4); }
.pcf-field label { font-size: 11px; font-weight: 700; color: #fff; }
.pcf-field input {
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: #fff;
  color: #111;
  font-size: 13px;
  outline: none;
}
.pcf-field input::placeholder { color: #9a9aa6; }
.pcf-field input:focus { border-color: #ee7d3b; box-shadow: 0 0 0 2px rgba(238, 125, 59, 0.35); }
.pcf-field input.is-error { border-color: #ff6b6b; }
.pcf-field input[readonly] { background: #6a6c7e; color: #1d1e2c; cursor: default; }
.pcf-error { color: #ff9b9b; font-size: 11px; }
.pcf-actions { display: flex; justify-content: flex-end; margin-top: var(--s-5); }
.pcf-confirm {
  width: 96px;
  padding: 10px 8px;
  border: 0;
  border-radius: 5px;
  background: #ee7d3b;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  cursor: pointer;
}
.pcf-confirm:hover { background: #d96d2d; }
.pcf-rule { border: 0; border-top: 1px solid rgba(255, 255, 255, 0.5); margin: var(--s-5) 0 var(--s-4); }
.pcf-seals { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-4); }
.pcf-seal { display: inline-flex; align-items: center; color: #c9cbd8; font-size: 11px; }
.pcf-seal--visa {
  flex-direction: column;
  background: #fff;
  color: #1a1f71;
  padding: 2px 6px;
  line-height: 1.05;
}
.pcf-seal--visa b { font-size: 13px; font-style: italic; font-weight: 800; }
.pcf-seal--visa small { font-size: 7px; letter-spacing: 0.08em; background: #1a1f71; color: #fff; padding: 0 4px; margin: 1px -6px -2px; align-self: stretch; text-align: center; }
.pcf-seal--mc { gap: 0; }
.pcf-seal--mc i { width: 16px; height: 16px; border-radius: 50%; background: #eb001b; }
.pcf-seal--mc i + i { background: #f79e1b; margin-left: -6px; mix-blend-mode: normal; opacity: 0.95; }
.pcf-seal--mc small { font-size: 7px; margin-left: 6px; max-width: 40px; line-height: 1.1; }
.pcf-seal--safekey { font-size: 14px; color: #a9abb9; }
.pcf-seal--safekey b { color: #c0c2cf; font-weight: 700; }
.pcf-seal--cs { font-size: 9px; font-weight: 700; color: #c4524a; }
.pcf-status {
  margin: var(--s-3) 0 0;
  text-align: center;
  font-size: 11px;
  color: var(--metal-soft);
}

#pm-card-fields { display: flex; flex-direction: column; gap: var(--s-4); }
#pm-card-fields[hidden] { display: none; }
.pm-wallet-paid-note {
  margin-top: var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: var(--r-2);
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.pm-wallet-paid-note[hidden] { display: none; }
.pm-wallet-paid-note strong { color: var(--ink); }

.pm-summary { position: sticky; top: 80px; }

/* Tooltip de info — usado hoy solo por el CVV */
.info-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px; height: 15px;
  margin-left: 4px;
  color: var(--metal);
  cursor: help;
  vertical-align: middle;
}
.info-tip:hover, .info-tip:focus-visible { color: var(--ink-soft); outline: none; }
.info-tip-bubble {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: 220px;
  background: var(--paper-deep);
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.45;
  padding: var(--s-3);
  border-radius: var(--r-2);
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
  opacity: 0;
  visibility: hidden;
  transition: opacity 160ms, transform 160ms;
  z-index: 20;
  pointer-events: none;
}
.info-tip:hover .info-tip-bubble,
.info-tip:focus-visible .info-tip-bubble {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 820px) {
  .pm-layout { grid-template-columns: 1fr; }
  .pm-summary { position: static; }
}
.ea-save-top {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: var(--r-pill);
  padding: 8px 18px;
  cursor: pointer;
  transition: all 180ms;
  font-family: var(--font-sans);
  flex-shrink: 0;
}
.ea-save-top:hover { background: var(--accent-deep); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(232,97,78,0.3); }

/* Hero */
.ea-hero {
  display: flex;
  gap: var(--s-5);
  padding: var(--s-5);
  align-items: flex-start;
  border-bottom: 1px solid var(--line);
}
.ea-hero-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 4px;
}
.ea-hero-meta { display: flex; align-items: center; gap: 8px; }
.ea-status-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.ea-status-badge.is-active  { background: rgba(39,194,128,0.15);  color: #27C280; border: 1px solid rgba(39,194,128,0.3); }
.ea-status-badge.is-paused  { background: rgba(120,120,140,0.15); color: var(--ink-soft); border: 1px solid rgba(120,120,140,0.3); }
.ea-status-badge.is-pending { background: rgba(91,156,246,0.15);  color: #5B9CF6; border: 1px solid rgba(91,156,246,0.3); }
.ea-hero-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
  font-family: var(--font-display);
  line-height: 1.2;
  margin: 0;
}
.ea-hero-price {
  font-size: 17px;
  font-weight: 700;
  color: var(--accent);
  font-family: var(--font-mono);
  letter-spacing: -0.02em;
}

/* Body — secciones */
.ea-body {
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

/* ── Edición inline sobre el preview de la publicación ── */
.ea-inline-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-soft);
}
.ea-inline-hint svg { flex-shrink: 0; color: var(--accent); }

.ea-preview {
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-4);
  overflow: hidden;
}

.eap-gallery { padding: var(--s-4); }
.eap-main {
  position: relative;
  border-radius: var(--r-3);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--paper-deep);
}
.eap-main-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eap-thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.eap-thumb {
  position: relative;
  width: 84px; height: 60px;
  border-radius: var(--r-2);
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 150ms;
}
.eap-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eap-thumb.is-cover { border-color: var(--accent); }
.eap-thumb-badge {
  position: absolute; left: 0; right: 0; bottom: 0;
  font-size: 9px; font-weight: 600; text-align: center;
  background: var(--accent); color: #fff; padding: 1px 0;
}
.eap-thumb-del {
  position: absolute; top: 3px; right: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  border: none; background: rgba(0,0,0,0.6); color: #fff;
  font-size: 11px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 150ms;
}
.eap-thumb:hover .eap-thumb-del { opacity: 1; }
.eap-add {
  width: 84px; height: 60px;
  border-radius: var(--r-2);
  border: 1.5px dashed var(--line-strong);
  background: transparent; color: var(--ink-soft);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  cursor: pointer; font-size: 10px; font-weight: 500;
  transition: border-color 150ms, color 150ms;
}
.eap-add:hover { border-color: var(--accent); color: var(--accent); }

.eap-head { padding: 0 var(--s-5) var(--s-4); border-bottom: 1px solid var(--line); }
.eap-status-row { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin-bottom: 12px; }
/* Identificador del anuncio (CR-XXXXXX), mismo dato y formato que la ficha
   (.ficha-listing-id). Va a la derecha de la fila de estado; si no cabe, baja
   a su propia línea. No es editable: user-select:all para copiarlo de un toque. */
.eap-listing-id {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-2);
  margin: 0 0 0 auto; font-size: 12px; color: var(--ink-soft);
}
.eap-listing-id-label { font-weight: 500; }
.eap-listing-id-value {
  font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.04em;
  color: var(--ink); user-select: all;
}
.eap-status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600;
  padding: 4px 11px; margin-bottom: 0;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: var(--paper-deep); color: var(--ink);
  cursor: pointer; transition: border-color 150ms;
}
.eap-status-pill:hover { border-color: var(--accent); }
.eap-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--metal); }
.eap-status-pill.is-active .eap-status-dot   { background: var(--verified); }
.eap-status-pill.is-paused .eap-status-dot   { background: var(--amber); }
.eap-status-pill.is-pending .eap-status-dot  { background: var(--finance); }
.eap-status-pill.is-expired .eap-status-dot  { background: #E5484D; }
.eap-status-pill.is-finished .eap-status-dot { background: var(--metal); }
.eap-status-pill.is-pending,
.eap-status-pill.is-expired,
.eap-status-pill.is-finished { cursor: default; }

.eap-status-actions { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.ea-status-action {
  font-size: 12px; font-weight: 600;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: transparent; color: var(--ink-soft);
  cursor: pointer; transition: all 150ms; font-family: var(--font-sans);
}
.ea-status-action:hover { border-color: var(--accent); color: var(--ink); }
.ea-status-action--danger { border-color: rgba(229,72,77,0.35); color: #f17178; }
.ea-status-action--danger:hover { background: rgba(229,72,77,0.12); border-color: rgba(229,72,77,0.5); }
.ea-status-action--renew {
  display: inline-flex; align-items: center; gap: 5px;
  border-color: var(--accent); color: var(--accent); background: rgba(232,97,78,0.08); font-weight: 700;
}
.ea-status-action--renew:hover { background: var(--accent); color: #fff; }
.eap-status-finished-note { font-size: 12px; color: var(--metal); font-style: italic; }

/* Identidad (marca/modelo/año/versión) — mismo grid de 2 columnas y mismas
   etiquetas que "Datos del auto" en crear publicación, para que se lea
   igual de "formulario" en vez de un título editorial. */
.eap-id-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3) var(--s-4);
  margin-bottom: var(--s-4);
}
.eap-field { display: flex; flex-direction: column; gap: 6px; }
.eap-field-label { font-size: 13px; font-weight: 500; color: var(--ink-soft); }
.eap-field--price { flex: 1; min-width: 160px; }

.eap-price-cur { font-family: var(--font-mono); color: var(--metal); margin-right: 2px; }

.eap-specs {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--line);
}
.eap-spec { background: var(--paper); padding: 12px var(--s-5); display: flex; flex-direction: column; gap: 6px; }
.eap-spec-label { font-size: 13px; font-weight: 500; color: var(--ink-soft); }
.eap-spec-val { margin: 0; }

.eap-desc-block { padding: var(--s-4) var(--s-5) var(--s-5); }
.eap-desc-label { font-size: 13px; font-weight: 500; color: var(--ink-soft); margin-bottom: 6px; }
.eap-desc { white-space: pre-wrap; }
.eap-desc.is-empty { font-style: italic; }

/* Fila de precio + flags (negociable / acepta cambio) */
.eap-price-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.eap-flags { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 1px; }
.eap-flag {
  font-size: 13px; font-weight: 500;
  padding: 9px 14px; border-radius: var(--r-2);
  border: 1px solid var(--line-strong); background: var(--paper-warm);
  color: var(--ink); cursor: pointer;
  transition: border-color 150ms, color 150ms, background 150ms, transform 150ms;
}
.eap-flag:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--paper-warm)); transform: translateY(-1px); }
.eap-flag.is-on { border-color: var(--verified); color: var(--verified); background: color-mix(in srgb, var(--verified) 12%, transparent); font-weight: 600; }
.eap-flag.is-on:hover { background: color-mix(in srgb, var(--verified) 18%, transparent); }

/* Bloque de equipamiento */
.eap-feat-block { padding: var(--s-4) var(--s-5); border-top: 1px solid var(--line); }
.eap-feat-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.eap-feat-btn {
  font-size: 12px; font-weight: 600; color: var(--accent);
  background: transparent; border: none; cursor: pointer; padding: 2px 4px;
}
.eap-feat-btn:hover { text-decoration: underline; }
.eap-feat-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.eap-feat-chip {
  font-size: 12px; color: var(--ink);
  background: var(--paper-deep); border: 1px solid var(--line-strong);
  border-radius: var(--r-pill); padding: 4px 11px;
}
.eap-feat-empty { font-size: 13px; color: var(--ink-soft); font-style: italic; }

.eap-feat-checklist { display: flex; flex-direction: column; gap: 12px; }
.eap-feat-group-label { font-size: 11px; font-weight: 600; letter-spacing: 0.03em; color: var(--ink-soft); margin-bottom: 6px; text-transform: uppercase; }
.eap-feat-items { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 12px; }
.eap-feat-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); cursor: pointer; }
.eap-feat-check input { width: 15px; height: 15px; accent-color: var(--accent); flex: none; cursor: pointer; }

/* Elementos editables (clic para editar en el sitio) — se ven como campo de
   texto o selector DESDE EL INICIO (mismo look que .field-group input/select
   en "Crear publicación"), no solo al pasar el mouse o hacer clic. Así el
   vendedor identifica dónde puede editar sin tener que tocar todo. */
.ea-ed {
  display: block;
  position: relative;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink);
  background: var(--paper-warm);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  padding: 10px 14px;
  outline: none;
  transition: border-color 150ms, background 150ms;
}
.ea-ed:hover { border-color: var(--accent); }
.ea-ed:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
.ea-ed.is-empty { color: var(--ink-soft); font-style: italic; }

/* Selector: mismo chevron que .sell-select para que se lea como dropdown */
.ea-ed--select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9' fill='none' stroke='%236E7898' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 36px;
}

/* Campo de texto multilínea (descripción) */
.ea-ed--textarea { min-height: 74px; line-height: 1.55; white-space: pre-wrap; }

.ea-ed--price { display: flex; align-items: baseline; }

.ea-ed.is-editing {
  background: transparent;
  border-color: transparent;
  background-image: none;
  padding: 0;
  cursor: default;
}
.ea-ed.is-editing:hover { border-color: transparent; }
.ea-ed-input {
  width: 100%;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--paper-warm);
  border: 1px solid var(--accent);
  border-radius: var(--r-2);
  padding: 10px 14px;
  outline: none;
}
.ea-ed-textarea { resize: vertical; min-height: 74px; line-height: 1.5; }

.ea-section {
  background: var(--paper-deep);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-3);
  overflow: hidden;
}
.ea-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.ea-section-icon {
  width: 30px;
  height: 30px;
  border-radius: var(--r-2);
  background: rgba(232, 97, 78, 0.1);
  border: 1px solid rgba(232, 97, 78, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
}
.ea-section-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  font-family: var(--font-display);
  margin: 0;
}
.ea-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
  padding: var(--s-5);
}
.ea-grid-1 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  padding: var(--s-5);
}
.ea-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ea-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ea-input {
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  color: var(--ink);
  font-size: 14px;
  font-family: var(--font-sans);
  padding: 10px 14px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 160ms, box-shadow 160ms;
  outline: none;
  -webkit-appearance: none;
}
.ea-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(232, 97, 78, 0.12);
}
.ea-input::placeholder { color: var(--metal); }
.ea-select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9' fill='none' stroke='%236E7898' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
}
.ea-textarea {
  resize: vertical;
  min-height: 110px;
  line-height: 1.6;
}

/* Campos con prefijo/sufijo (₡ precio, km kilometraje) — el input y el
   span de unidad se posicionan de forma independiente para que el texto
   nunca se desalinee verticalmente sea cual sea la altura real del input. */
.ea-input-suffix-wrap,
.ea-input-prefix-wrap {
  position: relative;
  display: block;
}
.ea-input-suffix-wrap .ea-input,
.ea-input-prefix-wrap .ea-input { width: 100%; }
.ea-input-suffix {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  pointer-events: none;
}
.ea-input-prefix {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  pointer-events: none;
  z-index: 1;
}
.ea-input-prefix-field { padding-left: 24px; }
.ea-input-suffix-wrap .ea-input { padding-right: 40px; }

/* Etiqueta + toggle de unidad (Km / Mi) */
.ea-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}
.ea-unit-toggle {
  display: flex;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  overflow: hidden;
}
.ea-unit-btn {
  background: var(--paper);
  border: none;
  padding: 3px 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 150ms, color 150ms;
}
.ea-unit-btn + .ea-unit-btn { border-left: 1px solid var(--line-strong); }
.ea-unit-btn.is-active { background: var(--accent); color: #fff; }

/* Fotos del vehículo */
.ea-section-hint {
  font-size: 12px;
  color: var(--ink-soft);
  padding: var(--s-4) var(--s-5) 0;
  margin: 0;
}
.ea-photos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--s-3);
  padding: var(--s-5);
}
.ea-photo-item {
  position: relative;
  border-radius: var(--r-2);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line-strong);
}
.ea-photo-item.is-cover { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(232, 97, 78, 0.18); }
.ea-photo-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ea-photo-cover-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  background: var(--accent);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: var(--r-pill);
}
.ea-photo-actions {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  gap: 4px;
  padding: 6px;
  background: linear-gradient(to top, rgba(0,0,0,0.65), transparent);
  opacity: 0;
  transition: opacity 150ms;
}
.ea-photo-item:hover .ea-photo-actions,
.ea-photo-item:focus-within .ea-photo-actions { opacity: 1; }
.ea-photo-action {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: rgba(255,255,255,0.92);
  border: none;
  border-radius: var(--r-2);
  padding: 5px 0;
  font-size: 10px;
  font-weight: 600;
  color: #111827;
  cursor: pointer;
  transition: background 150ms;
}
.ea-photo-action:hover { background: #fff; }
.ea-photo-action.ea-photo-delete { color: #E84E4E; }
.ea-photo-action svg { width: 12px; height: 12px; }

/* Estado del anuncio */
.ea-status-cards {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-5);
  flex-wrap: wrap;
}
.ea-status-card {
  flex: 1;
  min-width: 140px;
  cursor: pointer;
}
.ea-status-radio { display: none; }
.ea-status-card-body {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px var(--s-4);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-3);
  background: var(--paper);
  transition: all 160ms;
}
.ea-status-radio:checked + .ea-status-card-body {
  border-color: var(--accent);
  background: rgba(232, 97, 78, 0.05);
  box-shadow: 0 0 0 3px rgba(232, 97, 78, 0.1);
}
.ea-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ea-status-dot.is-active  { background: #27C280; box-shadow: 0 0 0 3px rgba(39,194,128,0.2); }
.ea-status-dot.is-paused  { background: #78788C; }
.ea-status-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.ea-status-card-sub {
  font-size: 11px;
  color: var(--ink-soft);
  margin-top: 1px;
}

/* Botones de acción inferiores */
.ea-bottom-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-3);
  padding-top: var(--s-3);
}

/* Módulo "Mejorar esta publicación" reubicado al final de editar anuncio —
   reusa las clases .upgrade-* del wizard de vender (mismo componente
   visual), solo con IDs propios (ea-) para no chocar con el paso 6. */
.ea-upgrade-divider {
  border-top: 1px solid var(--line);
  margin-bottom: var(--s-5);
}

/* ── Banner "Autorenovar destacados" (solo vendedor registrado) ──
   Mismo lenguaje visual de .dash-feature-alert: ícono en círculo + cuerpo,
   con un interruptor a la derecha. Vira a verde cuando queda activa. */
.ea-autorenew {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  margin: var(--s-4) 0 var(--s-5);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-3);
  transition: background 200ms, border-color 200ms;
}
.ea-autorenew[hidden] { display: none; }
.ea-autorenew-icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
  transition: background 200ms, color 200ms;
}
.ea-autorenew-body { flex: 1; min-width: 0; }
.ea-autorenew-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: 3px;
}
.ea-autorenew-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.ea-autorenew-tag {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--verified);
  background: color-mix(in srgb, var(--verified) 14%, transparent);
  border-radius: var(--r-pill);
  padding: 2px 8px;
}
.ea-autorenew-sub {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}
.ea-autorenew-action {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.ea-autorenew-state {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--metal);
}

/* Interruptor propio del flujo de edición (ver .cookie-switch para el mismo
   patrón en el centro de preferencias de cookies). */
.ea-switch {
  position: relative;
  width: 42px; height: 24px;
  flex: none;
  border-radius: var(--r-pill);
  background: var(--paper-warm);
  border: 1px solid var(--line-strong);
  cursor: pointer;
  padding: 0;
  transition: background 180ms, border-color 180ms;
}
.ea-switch-knob {
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--metal-soft);
  box-shadow: var(--shadow-sm);
  transition: transform 180ms var(--ease-out), background 180ms;
}
.ea-switch[aria-checked="true"] { background: var(--verified); border-color: var(--verified); }
.ea-switch[aria-checked="true"] .ea-switch-knob { transform: translateX(18px); background: #fff; }
.ea-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Activada: el banner pasa de "oferta" (acento) a "confirmado" (verde). */
.ea-autorenew.is-on {
  background: color-mix(in srgb, var(--verified) 8%, transparent);
  border-color: color-mix(in srgb, var(--verified) 26%, transparent);
  border-left-color: var(--verified);
}
.ea-autorenew.is-on .ea-autorenew-icon {
  background: color-mix(in srgb, var(--verified) 16%, transparent);
  color: var(--verified);
}
.ea-autorenew.is-on .ea-autorenew-state { color: var(--verified); }

/* Botón que abre la pantalla de programación (#view-autorenovar). Reemplaza al
   interruptor: el servicio ya no es un on/off, se programa día por día. */
.ea-autorenew-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-sans);
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: var(--r-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: background 180ms, transform 180ms, box-shadow 180ms;
}
.ea-autorenew-btn:hover { background: var(--accent-deep); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(232,97,78,0.28); }
.ea-autorenew-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ea-autorenew.is-on .ea-autorenew-btn { background: var(--verified); }
.ea-autorenew.is-on .ea-autorenew-btn:hover { background: var(--verified-soft); box-shadow: 0 6px 18px rgba(39,194,128,0.28); }

.ea-autorenew-summary {
  margin: var(--s-2) 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--verified);
}
.ea-autorenew-summary[hidden] { display: none; }

@media (max-width: 640px) {
  .ea-autorenew { flex-wrap: wrap; }
  .ea-autorenew-icon { display: none; }
  .ea-autorenew-action { width: 100%; justify-content: space-between; }
}

/* ==========================================================================
   RENOVACIÓN AUTOMÁTICA DE DESTACADO (#view-autorenovar)
   Reglamento del servicio + calendario acotado a la vigencia del anuncio.
   El documento conserva la jerarquía de color del original de crautos
   (cintillo rojo = servicio, cintillo verde = reglamento), traducida a la
   paleta oscura del sitio.
   ========================================================================= */
.ar-wrap { max-width: 1040px; }
.ar-body { padding: var(--s-5); }

/* ── Documento legal ── */
.ar-doc {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-3);
  overflow: hidden;
  background: var(--paper);
  margin-bottom: var(--s-6);
}
.ar-doc-title {
  padding: var(--s-3) var(--s-5);
  background: var(--accent-deep);
  color: #fff;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-align: center;
}
.ar-doc-intro {
  padding: var(--s-4) var(--s-5);
  background: color-mix(in srgb, var(--amber) 12%, var(--paper));
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink);
}
.ar-doc-intro strong { color: var(--amber); }
.ar-doc-rules-head {
  padding: var(--s-3) var(--s-5);
  background: var(--verified-soft);
  color: #fff;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-align: center;
}
.ar-doc-rules {
  list-style: decimal;
  padding: var(--s-5) var(--s-5) var(--s-3) calc(var(--s-5) + 20px);
  margin: 0;
  display: grid;
  gap: var(--s-4);
}
.ar-doc-rules li {
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink-soft);
  padding-left: 4px;
}
.ar-doc-rules li::marker { color: var(--accent); font-weight: 700; }
.ar-doc-rules strong { color: var(--ink); }
.ar-doc-foot {
  padding: 0 var(--s-5) var(--s-5);
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink);
}
.ar-doc-foot strong { color: var(--accent); }

/* ── Selector de fechas ── */
.ar-picker-head { margin-bottom: var(--s-5); }
.ar-picker-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s-2);
}
.ar-picker-sub {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 var(--s-3);
  max-width: 68ch;
}
.ar-window {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.ar-window-chip {
  font-size: 12px;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: 5px 14px;
}
.ar-window-chip strong { color: var(--ink); font-weight: 700; }
.ar-window-sep { color: var(--metal); font-size: 13px; }

.ar-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--s-5);
  align-items: start;
}

/* ── Calendario ── */
.ar-months {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: var(--s-4);
}
.ar-month {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: var(--s-4);
}
.ar-month-name {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  margin-bottom: var(--s-3);
}
.ar-dow, .ar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.ar-dow {
  margin-bottom: 6px;
}
.ar-dow span {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--metal);
}
.ar-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 600;
  font-family: var(--font-sans);
  border-radius: var(--r-2);
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-soft);
}
.ar-day--pad { visibility: hidden; }
.ar-day--off { color: var(--metal); opacity: 0.35; }
.ar-day--free {
  cursor: pointer;
  color: var(--ink);
  background: var(--paper-warm);
  border-color: var(--line-strong);
  transition: background 140ms, border-color 140ms, color 140ms, transform 140ms;
}
.ar-day--free:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.ar-day--free.is-sel {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.ar-day--free.is-sel:hover { background: var(--accent-deep); color: #fff; }
.ar-day--free:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ar-day--locked {
  background: color-mix(in srgb, var(--verified) 20%, transparent);
  border-color: color-mix(in srgb, var(--verified) 45%, transparent);
  color: var(--verified);
  cursor: default;
}

.ar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-top: var(--s-4);
}
.ar-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--ink-soft);
}
.ar-legend-dot {
  width: 12px; height: 12px;
  border-radius: 4px;
  border: 1px solid var(--line-strong);
  background: var(--paper-warm);
  flex: none;
}
.ar-legend-dot--sel { background: var(--accent); border-color: var(--accent); }
.ar-legend-dot--locked { background: color-mix(in srgb, var(--verified) 30%, transparent); border-color: var(--verified); }
.ar-legend-dot--off { background: transparent; border-style: dashed; opacity: 0.5; }

/* ── Fechas elegidas + hora ── */
.ar-picks {
  margin-top: var(--s-5);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: var(--s-4);
}
.ar-picks-head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  margin-bottom: var(--s-3);
}
.ar-picks-count {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-radius: var(--r-pill);
  padding: 2px 8px;
}
.ar-picks-empty, .ar-picks-note {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}
.ar-picks-note { margin-top: var(--s-3); font-size: 11.5px; color: var(--metal); }
.ar-pick {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 9px 0;
  border-top: 1px solid var(--line);
}
.ar-pick:first-of-type { border-top: none; }
.ar-pick-date { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; }
.ar-pick-time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--metal);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: var(--font-mono);
}
.ar-pick-time select {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink);
  background: var(--paper-warm);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  padding: 5px 8px;
  cursor: pointer;
}
.ar-pick-time select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ar-pick-remove {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  color: var(--metal);
  background: transparent;
  font-size: 12px;
  line-height: 1;
  transition: background 140ms, color 140ms;
}
.ar-pick-remove:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.ar-pick--locked .ar-pick-date { color: var(--ink-soft); }
.ar-pick-time-fixed {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--verified);
}
.ar-pick-lock { color: var(--verified); display: inline-flex; }
.ar-clear {
  margin-top: var(--s-3);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: 5px 14px;
  transition: all 150ms;
}
.ar-clear:hover { color: var(--ink); border-color: var(--ink-soft); background: var(--paper-warm); }

/* ── Resumen / cotización ── */
.ar-summary {
  position: sticky;
  top: calc(var(--header-h) + var(--s-3));
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-3);
  padding: var(--s-4);
}
.ar-summary-head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s-3);
}
.ar-summary-head svg { color: var(--accent); }
.ar-summary-rows { display: grid; gap: 7px; margin-bottom: var(--s-3); }
.ar-sum-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  font-size: 12.5px;
  color: var(--ink-soft);
}
.ar-sum-row strong { color: var(--ink); font-weight: 700; }
.ar-sum-row--off, .ar-sum-row--off strong { color: var(--verified); }
.ar-sum-row--hint {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--amber);
}
.ar-accept {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  margin: var(--s-3) 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-soft);
  cursor: pointer;
}
.ar-accept input { margin-top: 2px; accent-color: var(--accent); flex: none; }
.ar-confirm { width: 100%; }
.ar-confirm[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }
.ar-summary-note {
  margin: var(--s-3) 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--metal);
}

.ar-empty {
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-3);
  padding: var(--s-6) var(--s-5);
  text-align: center;
}
.ar-empty-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  margin-bottom: var(--s-2);
}
.ar-empty p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 auto;
  max-width: 52ch;
}

@media (max-width: 900px) {
  .ar-layout { grid-template-columns: 1fr; }
  .ar-summary { position: static; }
}
@media (max-width: 600px) {
  .ar-body { padding: var(--s-4); }
  .ar-doc-intro, .ar-doc-rules, .ar-doc-foot { padding-left: var(--s-4); padding-right: var(--s-4); }
  .ar-doc-rules { padding-left: calc(var(--s-4) + 18px); }
  .ar-picker-title { font-size: 19px; }
  .ar-months { grid-template-columns: 1fr; }
  .ar-pick { flex-wrap: wrap; }
  .ar-pick-date { flex: 1 0 100%; }
}
.ea-btn-cancel {
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: all 160ms;
  font-family: var(--font-sans);
}
.ea-btn-cancel:hover { color: var(--ink); border-color: var(--ink-soft); background: var(--paper); }
/* Eliminar publicación — acción destructiva, a la izquierda y con tinta de
   alerta para no confundirla con Cancelar / Guardar. */
.ea-btn-delete {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: auto;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  color: #E84E4E;
  background: transparent;
  border: 1px solid color-mix(in srgb, #E84E4E 55%, transparent);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: all 160ms;
  font-family: var(--font-sans);
}
.ea-btn-delete:hover { color: #fff; background: #E84E4E; border-color: #E84E4E; }
.ea-btn-save {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: all 180ms;
  font-family: var(--font-sans);
}
.ea-btn-save:hover { background: var(--accent-deep); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(232,97,78,0.3); }

@media (max-width: 600px) {
  .ea-hero { flex-direction: column; gap: var(--s-4); }
  .ea-grid-2 { grid-template-columns: 1fr; }
  .ea-body { padding: var(--s-4); }
  .ea-topbar { padding: var(--s-3) var(--s-4); }
  .ea-topbar-title { font-size: 13px; }
  .ea-bottom-actions { flex-direction: column; }
  .ea-btn-cancel, .ea-btn-save, .ea-btn-delete { width: 100%; justify-content: center; }
  .ea-btn-delete { margin-right: 0; order: 3; }
}

/* ============================================================================
   FIRST-FOLD COMPACT — Filtros visibles en el primer scroll
   ========================================================================= */

.search-bar {
  margin-top: 14px;
}

/* ── Chips de tipo rápido ── */
.hero-type-chips {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.htc-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--metal);
  margin-right: 3px;
  flex-shrink: 0;
}

.htc-chip {
  display: flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 180ms cubic-bezier(0.22,1,0.36,1);
  white-space: nowrap;
}
.htc-chip:hover {
  border-color: rgba(255,255,255,0.22);
  color: var(--ink);
  background: rgba(255,255,255,0.07);
}
.htc-chip.is-active {
  background: var(--ink);
  color: var(--bg-body);
  border-color: var(--ink);
}

/* Shortcuts: más compactos */
.search-shortcuts {
  margin-top: 8px;
  gap: 5px;
}
.shortcut {
  padding: 5px 11px;
  font-size: 11px;
}

/* Trust band: franja delgada */
.trust-band {
  margin-top: 14px;
  padding: 9px var(--s-5);
  gap: var(--s-4);
}
.trust-item-num {
  font-size: 20px;
}
.trust-item-text {
  font-size: 10.5px;
}


.listado-section {
  padding: var(--s-7) var(--s-6) var(--s-9);
}

.listado-header {
  margin-bottom: 14px;
  padding-bottom: 12px;
}

.listado-title {
  font-size: clamp(18px, 2vw, 28px);
}

.listado-meta {
  font-size: 12px;
  margin-top: 3px;
}

/* Compact hero responsive */
@media (max-width: 900px) {
  .hero-type-chips { gap: 4px; }
  .htc-chip { font-size: 11px; padding: 4px 10px; }
  .hero-video-wrap { aspect-ratio: 16/9; }
}
@media (max-width: 540px) {
  .hero-type-chips { display: none; }
  .trust-band { display: none; }
}

/* ==========================================================================
   BTN-REGISTRAR — secondary header action (desktop)
   ========================================================================= */
.btn-registrar {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--paper-deep);
  background: #fff;
  padding: 7px 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  transition: all 200ms var(--ease-out);
  white-space: nowrap;
}
.btn-registrar:hover {
  border-color: var(--accent);
  color: var(--accent-deep);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.btn-registrar-mobile {
  display: block;
  width: 100%;
  padding: 9px var(--s-4);
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  border: 1px dashed var(--line);
  border-radius: var(--r-pill);
  transition: color 180ms, border-color 180ms, background 180ms;
  margin-bottom: var(--s-2);
}
.btn-registrar-mobile:hover {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

/* ==========================================================================
   VIEW-REGISTRO — single-column registration layout
   ========================================================================= */
.reg-page {
  display: flex;
  flex-direction: column;
}

.reg-page-body {
  flex: 1;
  display: flex;
  justify-content: center;
  padding: var(--s-7) var(--s-5) var(--s-9);
}

/* ── Single-column form panel ── */
.reg-form-panel {
  width: 100%;
  max-width: 560px;
}

.reg-page-form {
  max-width: 100%;
}

/* ── Inline branding header ── */
.reg-form-header {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-bottom: var(--s-6);
  padding-bottom: var(--s-6);
  border-bottom: 1px solid var(--line);
}

.reg-form-logo {
  font-size: 20px;
  letter-spacing: -0.04em;
  text-decoration: none;
}

.reg-page-title {
  font-size: clamp(24px, 4vw, 34px);
  font-weight: 800;
  line-height: 1.12;
  margin: 0;
  color: var(--ink);
}

.reg-page-sub {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
}

.reg-form-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  list-style: none;
  padding: 0;
  margin: var(--s-1) 0 0;
}

.reg-form-benefits li {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 13px;
  color: var(--ink-soft);
}

.reg-side-benefit-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(39, 194, 128, 0.15);
  color: var(--verified);
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}

.reg-side-login-hint {
  font-size: 13px;
  color: var(--metal);
}

.reg-side-login-hint .auth-link {
  color: var(--accent);
}

/* ── Responsive ── */
@media (max-width: 600px) {
  .reg-page-body { padding: var(--s-5) var(--s-4) var(--s-8); }
  .reg-form-header { gap: var(--s-2); margin-bottom: var(--s-5); padding-bottom: var(--s-5); }
}

/* =============================================================================
   DESTACADOS — CARRUSEL HOME MOBILE
   ============================================================================= */

.destacados-section {
  display: none;
  background: var(--paper-deep);
  border-bottom: 1px solid var(--line);
  padding: var(--s-6) 0 var(--s-5);
}

@media (max-width: 900px) {
  .destacados-section { display: block; }
}

.destacados-header {
  padding: 0 var(--s-4);
  margin-bottom: var(--s-5);
}

.destacados-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s-2);
}

.destacados-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 6vw, 28px);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.4px;
  line-height: 1.15;
}

.destacados-title em {
  font-style: normal;
  color: var(--accent);
}

/* Scrollable track */
.destacados-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px var(--s-4) var(--s-2);
  scroll-padding-left: var(--s-4);
}

.destacados-track::-webkit-scrollbar { display: none; }

/* Navigation dots */
.destacados-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: var(--s-4);
  padding: 0 var(--s-4);
}

.destacados-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--line-strong);
  transition: width 250ms var(--ease-out), background 250ms;
  cursor: pointer;
  border: none;
  padding: 0;
  flex-shrink: 0;
}

.destacados-dot.is-active {
  width: 20px;
  background: var(--accent);
}

/* Carrusel de destacados: la card estándar (.card) actúa como ítem del
   carrusel — mismo formato que los destacados del listado. */
/* Las cards del carrusel se igualan al tamaño de las cards del grid de abajo
   (2 columnas en mobile): calc(50vw - 43px) ≈ ancho de una columna del grid.
   Así se ven ~2 vehículos a la vez (más un asomo del siguiente) y el carrusel
   sigue siendo funcional con el auto-scroll (ver initDestacados). */
.destacados-track .card {
  flex: 0 0 calc(50vw - 43px);
  max-width: none;
  scroll-snap-align: start;
}

/* Featured card (legacy — el carrusel ya usa .card; se mantiene por compat) */
.dest-card {
  flex: 0 0 76vw;
  max-width: 290px;
  scroll-snap-align: start;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
  box-shadow: var(--shadow-sm);
}

.dest-card:active {
  transform: scale(0.975);
}

.dest-card-photo {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--paper-deep);
}

.dest-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms var(--ease-out);
}

.dest-card:hover .dest-card-photo img {
  transform: scale(1.04);
}

.dest-card-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--verified);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font-sans);
  padding: 3px 9px;
  border-radius: var(--r-pill);
  letter-spacing: 0.03em;
}

.dest-card-badge.ev {
  background: var(--accent);
}

.dest-card-price-pill {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  letter-spacing: 0.01em;
}

.dest-card-body {
  padding: var(--s-3) var(--s-4) var(--s-4);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.dest-card-brand {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--metal-soft);
}

.dest-card-model {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: -0.2px;
}

.dest-card-year {
  font-weight: 500;
  color: var(--metal);
}

.dest-card-specs {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--metal-soft);
}

.dest-sep {
  color: var(--line-strong);
  font-size: 12px;
}

.dest-card-btn {
  margin-top: var(--s-2);
  padding: 9px 14px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--r-2);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  text-align: center;
  transition: background 160ms;
  letter-spacing: -0.01em;
}

.dest-card-btn:hover { background: var(--accent-deep); }

/* ============================================================================
   HERO — COMPACT OVERRIDES
   Sin video de fondo: el hero se achica al mínimo necesario para que el
   título y el buscador quepan, dejando ver antes las cards del listado.
   ========================================================================== */
.hero { min-height: 0; }
.hero-content { padding: 28px var(--s-6); }
.hero-headline {
  font-size: clamp(20px, 2vw, 28px);
  max-width: 360px;
  text-shadow: none;
}

/* ≥901px: título y buscador quedan en la misma fila, a la misma altura —
   antes se apilaban verticalmente, lo que inflaba mucho la altura del hero. */
@media (min-width: 901px) {
  .hero-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-6);
  }
  .hero-headline { margin: 0; }
  .hero-search-card { margin-top: 0; flex: 0 1 620px; }
}

@media (max-width: 768px) {
  .hero-content { padding: 20px var(--s-4) 14px; }
  .hero-headline { font-size: 18px; line-height: 1.2; max-width: 100%; text-align: center; }
}
@media (max-width: 480px) {
  .hero-content { padding: 16px var(--s-4) 12px; }
  .hero-headline { font-size: 16.5px; }
}

/* ── Hero search: collapsible on mobile ── */
.hero-search-trigger { display: none; } /* hidden on desktop */

/* CTA "Buscar autos" — solo mobile: reemplaza la card de búsqueda oculta y
   baja con scroll suave a los filtros del pie. Oculto por defecto (desktop). */
.hero-mobile-search-cta { display: none; }

@media (max-width: 900px) {
  /* Filtro del hero oculto en mobile — el buscador rápido solo vive en desktop;
     en mobile se usa la sección de filtros al pie de la página. */
  .hero-search-card { display: none; }

  /* CTA "Buscar autos" — visible solo en mobile · estilo "en negativo"
     (outline): fondo transparente, borde y texto en acento. Al presionar
     se invierte (se rellena con el acento). */
  .hero-mobile-search-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    width: 100%;
    margin-top: var(--s-4);
    padding: 15px 20px;
    background: transparent;
    color: var(--accent);
    border: 1.5px solid var(--accent);
    border-radius: 14px;
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: background 150ms, color 150ms;
  }
  .hero-mobile-search-cta:hover,
  .hero-mobile-search-cta:active {
    background: var(--accent);
    color: #fff;
  }
  .hero-mobile-search-cta svg { flex-shrink: 0; }

  /* Show trigger */
  .hero-search-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 15px 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: var(--font-sans);
    text-align: left;
  }
  .hero-trigger-text {
    flex: 1;
    font-size: 15px;
    font-weight: 500;
    color: #374151;
  }
  .hero-search-trigger svg:first-child { color: #6b7280; flex-shrink: 0; }
  .hero-trigger-chevron {
    color: #9ca3af;
    transition: transform 220ms var(--ease-expo);
    flex-shrink: 0;
  }

  /* Collapsed: body hidden */
  .hero-search-body {
    display: none;
  }

  /* Expanded: body visible + chevron rotates */
  .hero-search-card.is-expanded .hero-search-body {
    display: block;
    animation: expPanelIn 220ms var(--ease-expo);
  }
  .hero-search-card.is-expanded .hero-trigger-chevron {
    transform: rotate(180deg);
  }
  .hero-search-card.is-expanded .hero-trigger-text {
    color: #111827;
    font-weight: 600;
  }
}

/* ── Ver más filtros row ── */
.hero-search-more {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 20px 12px;
  border-top: 1px solid rgba(0,0,0,0.07);
}

.hero-more-filters-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #4b5563;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  transition: background 150ms, color 150ms;
  font-family: var(--font-sans);
}
.hero-more-filters-btn:hover {
  background: rgba(0,0,0,0.06);
  color: #111827;
}
.hero-more-filters-btn svg { flex-shrink: 0; }

/* ============================================================================
   HERO EXPANDED FILTERS — Desktop inline panel (≥901px only)
   ========================================================================== */
.hero-exp-panel {
  display: none;
  border-top: 1px solid rgba(0,0,0,0.08);
}
@media (min-width: 901px) {
  .hero-exp-panel.is-open {
    display: block;
    animation: expPanelIn 220ms var(--ease-expo);
  }
}
@keyframes expPanelIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-exp-body {
  padding: 16px 20px 4px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hero-exp-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hero-exp-full { /* takes full row */ }

.hero-exp-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6b7280;
  font-family: var(--font-sans);
}

.hero-exp-grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.hero-exp-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.hero-exp-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }

.hero-exp-select {
  width: 100%;
  background: #f9fafb;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: var(--r-2);
  padding: 7px 28px 7px 10px;
  font-size: 13px;
  font-weight: 500;
  color: #111827;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  font-family: var(--font-sans);
  transition: border-color 150ms;
}
.hero-exp-select:focus { border-color: var(--accent); outline: none; }

.hero-exp-input {
  flex: 1;
  background: #f9fafb;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: var(--r-2);
  padding: 7px 10px;
  font-size: 13px;
  color: #111827;
  outline: none;
  font-family: var(--font-sans);
  transition: border-color 150ms;
  min-width: 0;
}
.hero-exp-input:focus { border-color: var(--accent); }
.hero-exp-input::placeholder { color: #9ca3af; }

.hero-exp-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.hero-exp-pill {
  padding: 5px 14px;
  border: 1px solid rgba(0,0,0,0.14);
  border-radius: var(--r-pill);
  background: transparent;
  font-size: 12px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms;
  font-family: var(--font-sans);
}
.hero-exp-pill:hover:not(.is-active) { background: rgba(0,0,0,0.05); }
.hero-exp-pill.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.hero-exp-toggle {
  display: inline-flex;
  border: 1px solid rgba(0,0,0,0.14);
  border-radius: var(--r-2);
  overflow: hidden;
  width: 100%;
}
.hero-exp-toggle-btn {
  flex: 1;
  padding: 6px 8px;
  border: none;
  background: transparent;
  font-size: 12px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  transition: background 120ms, color 120ms;
  font-family: var(--font-sans);
  white-space: nowrap;
}
.hero-exp-toggle-btn + .hero-exp-toggle-btn { border-left: 1px solid rgba(0,0,0,0.14); }
.hero-exp-toggle-btn.is-active { background: var(--accent); color: #fff; }

.hero-exp-range {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero-exp-range .hero-exp-select { flex: 1; }
.hero-exp-range-sep { color: #9ca3af; font-size: 13px; flex-shrink: 0; }

.hero-exp-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0 16px;
  border-top: 1px solid rgba(0,0,0,0.07);
  margin-top: 2px;
}
.hero-exp-clear {
  background: transparent;
  border: none;
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
  cursor: pointer;
  padding: 6px 0;
  font-family: var(--font-sans);
  transition: color 150ms;
}
.hero-exp-clear:hover { color: #374151; }
.hero-exp-apply {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--r-2);
  padding: 9px 20px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 150ms;
  font-family: var(--font-sans);
  letter-spacing: -0.01em;
}
.hero-exp-apply:hover { background: var(--accent-deep); }

/* ============================================================================
   FILTROS AVANZADOS — FULL-SCREEN OVERLAY PAGE
   ========================================================================== */
.adv-filters-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--bg-body);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 380ms var(--ease-expo);
  overflow: hidden;
}
.adv-filters-overlay.is-open {
  transform: translateX(0);
}

/* ── Header ── */
.adv-filters-header {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: 0 var(--s-6);
  height: 60px;
  border-bottom: 1px solid var(--line);
  background: var(--paper-deep);
  flex-shrink: 0;
}

.adv-filters-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px 10px 6px 4px;
  border-radius: var(--r-2);
  transition: color 150ms, background 150ms;
  font-family: var(--font-sans);
  white-space: nowrap;
}
.adv-filters-back:hover { color: var(--ink); background: var(--paper-warm); }

.adv-filters-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  flex: 1;
  text-align: center;
}

.adv-clear-top {
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: var(--r-2);
  transition: background 150ms;
  font-family: var(--font-sans);
  white-space: nowrap;
}
.adv-clear-top:hover { background: rgba(232, 97, 78, 0.1); }

/* ── Body (scrollable) ── */
.adv-filters-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--s-5) var(--s-6) var(--s-9);
  max-width: 860px;
  width: 100%;
  margin: 0 auto;
}
.adv-filters-body::-webkit-scrollbar { width: 4px; }
.adv-filters-body::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 2px; }

/* ── Filter section ── */
.adv-filter-section {
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--line);
}
.adv-filter-section:last-child { border-bottom: none; }

.adv-filter-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--line);
}
.adv-filter-row-2 .adv-filter-section {
  padding: 0;
  border-bottom: none;
}

.adv-filter-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--metal);
  margin-bottom: var(--s-3);
  display: block;
}

/* ── Select ── */
.adv-select {
  width: 100%;
  padding: 11px 36px 11px 14px;
  background: var(--paper);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-2);
  color: var(--ink);
  font-size: 14px;
  font-family: var(--font-sans);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9' fill='none' stroke='%236E7898' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  transition: border-color 150ms;
}
.adv-select:focus { outline: none; border-color: var(--ink); }
.adv-select:hover { border-color: var(--ink-soft); }

/* ── Input ── */
.adv-input {
  width: 100%;
  padding: 11px 14px;
  background: var(--paper);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-2);
  color: var(--ink);
  font-size: 14px;
  font-family: var(--font-sans);
  transition: border-color 150ms;
}
.adv-input::placeholder { color: var(--metal); }
.adv-input:focus { outline: none; border-color: var(--ink); }

/* ── Pills ── */
.adv-pills-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.adv-pills-hint {
  font-size: 13px;
  color: var(--ink-soft);
}

.adv-pill {
  padding: 8px 16px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  background: transparent;
  cursor: pointer;
  transition: all 180ms;
  font-family: var(--font-sans);
  white-space: nowrap;
}
.adv-pill:hover { border-color: var(--ink-soft); color: var(--ink); }
.adv-pill.is-active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* ── Toggle group (Financiado / Se Recibe) ── */
.adv-toggle-group {
  display: flex;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-2);
  overflow: hidden;
}

.adv-toggle-btn {
  flex: 1;
  padding: 9px 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  background: transparent;
  border: none;
  border-right: 1px solid var(--line-strong);
  cursor: pointer;
  transition: background 150ms, color 150ms;
  font-family: var(--font-sans);
  text-align: center;
}
.adv-toggle-btn:last-child { border-right: none; }
.adv-toggle-btn:hover { background: var(--paper-warm); color: var(--ink); }
.adv-toggle-btn.is-active {
  background: var(--paper-warm);
  color: var(--ink);
  font-weight: 600;
}

/* ── Range row ── */
.adv-range-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.adv-range-row .adv-select,
.adv-range-row .adv-input { flex: 1; }

.adv-range-sep {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--metal);
  flex-shrink: 0;
}

/* ── Footer ── */
.adv-filters-footer {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-6);
  border-top: 1px solid var(--line);
  background: var(--paper-deep);
  flex-shrink: 0;
}

.adv-clear-btn {
  padding: 12px 20px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-2);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  background: transparent;
  cursor: pointer;
  transition: all 150ms;
  font-family: var(--font-sans);
  white-space: nowrap;
}
.adv-clear-btn:hover { border-color: var(--ink-soft); color: var(--ink); }

.adv-apply-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: 14px 24px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--r-2);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 150ms, transform 150ms var(--ease-out);
  font-family: var(--font-sans);
  letter-spacing: -0.01em;
}
.adv-apply-btn:hover { background: var(--accent-deep); transform: translateY(-1px); }

.adv-results-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  background: rgba(255,255,255,0.25);
  border-radius: var(--r-pill);
  font-size: 13px;
  font-family: var(--font-mono);
  font-weight: 500;
  padding: 0 6px;
}

/* ── Mobile responsive ── */
@media (max-width: 600px) {
  .adv-filters-header { padding: 0 var(--s-4); }
  .adv-filters-body { padding: var(--s-4) var(--s-4) var(--s-9); }
  .adv-filters-footer { padding: var(--s-3) var(--s-4); }
  .adv-filter-row-2 { grid-template-columns: 1fr; gap: 0; }
  .adv-filter-row-2 .adv-filter-section { padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
  .adv-filter-row-2 .adv-filter-section:last-child { border-bottom: none; }
}

/* ============================================================================
   BLUEBOOK — consulta de valor de mercado
   ========================================================================= */
.bb-hero {
  background: linear-gradient(135deg, #101a33 0%, #142451 55%, #0d1730 100%);
  padding: 72px var(--s-6) 56px;
  text-align: center;
}
.bb-hero-content { max-width: 640px; margin: 0 auto; }
.bb-hero-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--finance);
  background: rgba(91, 156, 246, 0.14);
  padding: 5px 14px;
  border-radius: var(--r-pill);
  margin-bottom: var(--s-3);
}
.bb-hero-title {
  font-size: clamp(28px, 4.5vw, 44px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 var(--s-3);
}
.bb-hero-title .accent { color: var(--finance); font-style: normal; font-weight: 800; }
.bb-hero-sub {
  font-size: 15px;
  color: rgba(255,255,255,0.72);
  line-height: 1.5;
  margin: 0 auto;
}
@media (max-width: 640px) {
  .bb-hero { padding: 48px var(--s-4) 36px; }
}

.bb-section {
  max-width: 860px;
  margin: 0 auto;
  padding: var(--s-7) var(--s-4) var(--s-9);
}

.bb-form-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: var(--s-6);
  box-shadow: var(--shadow-md);
}

.bb-form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4) var(--s-5);
  margin-bottom: var(--s-6);
}
.bb-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bb-field-span2 { grid-column: span 2; }
.bb-field-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--metal-soft);
}
.bb-field-select,
.bb-field-input {
  width: 100%;
  padding: 10px 34px 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  font-size: 14px;
  font-family: var(--font-sans);
  background: var(--paper-warm);
  color: var(--ink);
  outline: none;
  transition: border-color 200ms, box-shadow 200ms;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9' fill='none' stroke='%236E7898' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 15px;
}
.bb-field-input {
  cursor: text;
  padding: 10px 12px;
  background-image: none;
}
.bb-field-input::placeholder { color: var(--metal); }
.bb-field-select:disabled { opacity: 0.5; cursor: not-allowed; }
.bb-field-select:focus,
.bb-field-input:focus {
  border-color: var(--finance);
  box-shadow: 0 0 0 3px var(--finance-soft);
}
.bb-range-inputs { display: flex; align-items: center; gap: var(--s-2); }
.bb-range-sep { color: var(--metal); font-size: 13px; flex-shrink: 0; }

/* ── Captcha (estilo "No soy un robot") ── */
.bb-captcha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  background: var(--paper-warm);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-5);
}
.bb-captcha-check {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-sans);
}
.bb-captcha-box {
  position: relative;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border: 2px solid var(--line-strong);
  border-radius: 4px;
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 200ms, border-color 200ms;
}
.bb-captcha-tick {
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 150ms, transform 150ms var(--ease-out);
}
.bb-captcha-spinner {
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--finance);
  opacity: 0;
}
.bb-captcha-check.is-loading .bb-captcha-spinner {
  opacity: 1;
  animation: bb-spin 700ms linear infinite;
}
.bb-captcha-check.is-checked .bb-captcha-box { background: var(--verified); border-color: var(--verified); }
.bb-captcha-check.is-checked .bb-captcha-tick { opacity: 1; transform: scale(1); }
.bb-captcha-text { font-size: 14px; color: var(--ink); font-weight: 500; }
@keyframes bb-spin { to { transform: rotate(360deg); } }

.bb-captcha-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--metal-soft);
}
.bb-captcha-brand svg { flex-shrink: 0; }
.bb-captcha-brand span {
  font-size: 9px;
  line-height: 1.3;
  color: var(--metal);
}

.bb-search-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--r-2);
  padding: 14px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 150ms, transform 150ms var(--ease-out);
  letter-spacing: -0.01em;
}
.bb-search-btn:hover { background: var(--accent-deep); transform: translateY(-1px); }
.bb-search-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.bb-search-btn:disabled:hover { background: var(--accent); transform: none; }

/* Obligatorio (*) y aviso de valor inválido — solo Bluebook */
.bb-req { color: #E84E4E; margin-left: 2px; }
.bb-field .field-error { margin: 0; }
.bb-field-input.is-error,
.bb-field-select.is-error { border-color: #E84E4E; }

/* ── Resultados ── */
.bb-results {
  margin-top: var(--s-6);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: var(--s-6);
  box-shadow: var(--shadow-md);
}
.bb-results-head { margin-bottom: var(--s-5); text-align: center; }
.bb-results-head h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
}
.bb-stats-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}
.bb-stat-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--s-4) var(--s-3);
  background: var(--paper-warm);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  text-align: center;
}
.bb-stat-card-accent {
  background: var(--finance-soft);
  border-color: var(--finance-border);
}
.bb-stat-num {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.bb-stat-card-accent .bb-stat-num { color: var(--finance); }
.bb-stat-lbl {
  font-size: 11px;
  color: var(--metal-soft);
  font-weight: 500;
}
.bb-disclaimer {
  font-size: 12px;
  color: var(--metal);
  font-style: italic;
  text-align: center;
  line-height: 1.5;
  max-width: 560px;
  margin: 0 auto var(--s-5);
}
.bb-again-btn {
  display: block;
  margin: 0 auto;
  background: none;
  border: 1.5px solid var(--line-strong);
  color: var(--ink);
  border-radius: var(--r-2);
  padding: 11px 24px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 150ms, background 150ms;
}
.bb-again-btn:hover { border-color: var(--finance); background: var(--finance-soft); }

.bb-no-results { text-align: center; }
.bb-no-results h3 { font-size: 17px; color: var(--ink); margin-bottom: var(--s-2); }
.bb-no-results p { font-size: 13px; color: var(--metal-soft); margin-bottom: var(--s-5); }

@media (max-width: 720px) {
  .bb-form-grid { grid-template-columns: repeat(2, 1fr); }
  .bb-field-span2 { grid-column: span 2; }
  .bb-stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .bb-form-card { padding: var(--s-4); }
  .bb-form-grid { grid-template-columns: 1fr; }
  .bb-field-span2 { grid-column: span 1; }
  .bb-captcha { flex-wrap: wrap; }
  .bb-stats-grid { grid-template-columns: 1fr 1fr; }
}

/* =============================================================================
   VENDEDOR REGISTRADO — banner de acceso, toggle de registro, planes de
   espacios y pago mixto de mejoras (wallet + tarjeta).
   ========================================================================== */

/* ── Banner "¿Ya tiene cuenta? Ingrese aquí" sobre las tarjetas de tipo ── */
.sell-type-login-banner {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  max-width: 560px;
  margin: 0 auto var(--s-6);
  padding: var(--s-3) var(--s-4);
  background: color-mix(in srgb, var(--accent) 8%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line-strong));
  border-radius: var(--r-3);
}
.sell-type-login-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
}
.sell-type-login-text { font-size: 14px; color: var(--ink); font-weight: 500; }
.sell-type-login-link {
  margin-left: auto;
  padding: 7px 16px;
  border: none;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background 160ms, box-shadow 160ms;
  white-space: nowrap;
}
.sell-type-login-link:hover {
  background: var(--accent-deep);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 38%, transparent);
}

/* Nota descriptiva dentro de la tarjeta "Registrado" */
.sell-type-card-note {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 var(--s-5);
  padding: var(--s-3) var(--s-4);
  background: color-mix(in srgb, var(--amber) 8%, transparent);
  border-left: 2px solid color-mix(in srgb, var(--amber) 55%, transparent);
  border-radius: 0 var(--r-2) var(--r-2) 0;
}
.sell-type-card-note strong { color: var(--ink); }

@media (max-width: 480px) {
  .sell-type-login-banner { flex-wrap: wrap; }
  .sell-type-login-link { margin-left: 0; width: 100%; text-align: center; }
}

/* ── Toggle de tipo de vendedor en "Crear cuenta" ── */
.reg-seller-toggle {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 4px;
  background: var(--paper-deep);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-3);
}
.reg-seller-thumb {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(50% - 4px);
  height: calc(100% - 8px);
  border-radius: calc(var(--r-3) - 4px);
  background: var(--paper-warm);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-sm);
  transition: transform 260ms var(--ease-out), background 200ms, border-color 200ms;
  z-index: 0;
}
.reg-seller-toggle.is-recurrente .reg-seller-thumb {
  transform: translateX(calc(100% + 0px));
  background: color-mix(in srgb, var(--amber) 18%, var(--paper-warm));
  border-color: color-mix(in srgb, var(--amber) 45%, transparent);
}
.reg-seller-opt {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px var(--s-3);
  background: none;
  border: none;
  border-radius: calc(var(--r-3) - 4px);
  color: var(--ink-soft);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: color 200ms;
}
.reg-seller-opt svg { opacity: 0.7; transition: opacity 200ms; }
.reg-seller-opt.is-active { color: var(--ink); }
.reg-seller-opt.is-active svg { opacity: 1; }
.reg-seller-toggle.is-recurrente .reg-seller-opt[data-seller="recurrente"].is-active { color: var(--amber); }

.reg-seller-desc {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  margin-top: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--paper-deep);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.reg-seller-desc strong { color: var(--ink); font-weight: 600; }
.reg-seller-desc-icon { flex-shrink: 0; margin-top: 1px; color: var(--metal-soft); }
.reg-seller-desc.is-recurrente { border-color: color-mix(in srgb, var(--amber) 32%, transparent); }
.reg-seller-desc.is-recurrente .reg-seller-desc-icon { color: var(--amber); }
.reg-seller-desc.is-recurrente strong { color: color-mix(in srgb, var(--amber) 75%, var(--ink)); }

/* ── Pantalla bloqueada: comprar planes de espacios ── */
.rp-lock {
  max-width: 560px;
  margin: 0 auto;
  padding: var(--s-7) var(--s-5) var(--s-6);
  text-align: center;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-4);
  animation: fadeUp 320ms var(--ease-out) both;
}
.rp-lock-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto var(--s-4);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--amber) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--amber) 32%, transparent);
  color: var(--amber);
}
.rp-lock-title {
  font-family: var(--font-display);
  font-size: clamp(19px, 3vw, 23px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 var(--s-3);
}
.rp-lock-sub {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 auto var(--s-6);
  max-width: 440px;
}
.rp-lock-sub strong { color: var(--ink); font-weight: 600; }

/* ── Tarjeta selectora del plan de espacios ── */
.rp-plan-card {
  text-align: left;
  padding: var(--s-5);
  background: var(--paper-deep);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-3);
}
.rp-plan-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}
.rp-plan-title { display: block; font-size: 15px; font-weight: 700; color: var(--ink); }
.rp-plan-rate { display: block; margin-top: 2px; font-size: 12px; color: var(--metal-soft); font-family: var(--font-mono); }
.rp-plan-badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 10px;
  color: var(--amber);
  background: color-mix(in srgb, var(--amber) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--amber) 32%, transparent);
  border-radius: var(--r-pill);
}
.rp-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-5);
  padding: var(--s-4);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  margin-bottom: var(--s-4);
}
.rp-step-btn {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--paper-warm);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 150ms, background 150ms, opacity 150ms;
}
.rp-step-btn:hover:not(:disabled) { border-color: var(--amber); color: var(--amber); }
.rp-step-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.rp-stepper-val { text-align: center; min-width: 84px; }
.rp-stepper-val strong { display: block; font-family: var(--font-display); font-size: 34px; font-weight: 800; line-height: 1; color: var(--ink); }
.rp-stepper-val small { display: block; margin-top: 3px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--metal); }
.rp-plan-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  margin-bottom: var(--s-4);
}
.rp-plan-total-lbl { display: block; font-size: 13px; color: var(--ink-soft); font-weight: 600; }
.rp-plan-total-sub { display: block; margin-top: 1px; font-size: 11px; color: var(--metal); }
.rp-plan-total-val { font-family: var(--font-mono); font-size: 24px; font-weight: 700; color: var(--amber); }

/* Liquidación del plan de espacios — mismo bloque .liq de la pasarela, dentro
   de la tarjeta del plan. El total va en ámbar, el color del módulo. */
.rp-plan-liq {
  padding: var(--s-3) var(--s-4);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  margin-bottom: var(--s-4);
}
.rp-plan-liq .liq { margin-top: 2px; padding-top: 0; border-top: none; }
.rp-plan-liq .liq-row--total strong { color: var(--amber); }
.rp-buy-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px var(--s-4);
  border: none;
  border-radius: var(--r-3);
  background: var(--amber);
  color: #201400;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 160ms, box-shadow 160ms, transform 160ms;
}
.rp-buy-btn:hover {
  background: color-mix(in srgb, var(--amber) 88%, #000);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--amber) 38%, transparent);
  transform: translateY(-1px);
}

/* ── Bloque de espacios disponibles en la cabecera del módulo ── */
.dr-spaces-block .dr-account-date { display: flex; align-items: baseline; gap: 5px; }
.dr-spaces-block .dr-account-date strong { font-family: var(--font-display); font-size: 22px; font-weight: 800; color: var(--amber); }
.dr-spaces-block .dr-account-date small { font-size: 12px; color: var(--metal); font-weight: 500; }
.dr-spaces-meter {
  margin-top: 6px;
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--paper-deep);
  overflow: hidden;
}
.dr-spaces-meter span {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--amber), color-mix(in srgb, var(--amber) 60%, var(--accent)));
  transition: width 400ms var(--ease-out);
}
/* Text link "comprar más espacios" — mismo ámbar del número de espacios. */
.dr-spaces-buymore-link {
  align-self: flex-start;
  margin-top: 6px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--amber);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 160ms;
}
.dr-spaces-buymore-link:hover { color: color-mix(in srgb, var(--amber) 75%, var(--ink)); }
.dr-spaces-buymore-link:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: var(--r-1); }

.btn-dash-publish--buy { background: var(--amber); color: #201400; }
.btn-dash-publish--buy:hover { background: color-mix(in srgb, var(--amber) 88%, #000); box-shadow: 0 4px 14px color-mix(in srgb, var(--amber) 34%, transparent); }

.rp-buymore { margin-bottom: var(--s-5); }

/* ── Paneles de plan mensual / adicionales / próximo ciclo ──────────────────
   Los tres comparten .rp-plan-card. El de adicionales se distingue en ámbar
   porque su contenido principal es una advertencia de vigencia; el del
   próximo ciclo va en tinta neutra porque no cobra nada hoy. */
.rp-plan-card--extra {
  border-color: color-mix(in srgb, var(--amber) 45%, transparent);
  box-shadow: 0 12px 32px rgba(0,0,0,0.22);
  animation: fadeUp 260ms var(--ease-out) both;
}
.rp-plan-card--next {
  border-color: var(--line-strong);
  box-shadow: 0 12px 32px rgba(0,0,0,0.22);
  animation: fadeUp 260ms var(--ease-out) both;
}
.rp-plan-badge--warn {
  color: var(--amber);
  background: color-mix(in srgb, var(--amber) 18%, transparent);
  border-color: color-mix(in srgb, var(--amber) 45%, transparent);
}

/* Plan vigente — referencia fija arriba del selector del próximo ciclo, para
   comparar contra lo que se está eligiendo sin salir del panel. */
.rp-current-plan {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-4);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
}
.rp-current-plan span { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--metal); }
.rp-current-plan strong { font-size: 14px; font-weight: 700; color: var(--ink); }

/* Cantidades sugeridas — atajos del stepper (que va de a uno hasta 30). */
.rp-presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}
.rp-preset {
  min-width: 42px;
  padding: 7px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 150ms, color 150ms, background 150ms;
}
.rp-preset:hover { border-color: var(--amber); color: var(--ink); }
.rp-preset.is-active {
  background: color-mix(in srgb, var(--amber) 16%, transparent);
  border-color: color-mix(in srgb, var(--amber) 55%, transparent);
  color: var(--ink);
}

/* Nota al pie de un panel (cuándo se cobra, qué no cambia). */
.rp-note {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  padding: var(--s-3);
  margin-bottom: var(--s-4);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.rp-note svg { flex-shrink: 0; margin-top: 2px; color: var(--metal-soft); }
.rp-note strong { color: var(--ink); font-weight: 600; }

/* ── AVISO DE VIGENCIA DE LOS ADICIONALES ──────────────────────────────────
   La regla que más se malinterpreta del módulo: los espacios adicionales NO
   corren un mes propio, vencen con el plan. Por eso ocupa el cuerpo del panel
   y no una nota al pie: título con la fecha real, explicación, línea de tiempo
   del ciclo del vendedor y el contraste contra la fecha que la gente asume. */
.rp-warn {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-4);
  margin-bottom: var(--s-4);
  background: color-mix(in srgb, var(--amber) 10%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--amber) 38%, transparent);
  border-radius: var(--r-3);
}
.rp-warn-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--amber) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--amber) 38%, transparent);
  color: var(--amber);
}
.rp-warn-body { min-width: 0; flex: 1; }
.rp-warn-title {
  display: block;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--ink);
  margin-bottom: var(--s-2);
}
.rp-warn-text {
  margin: 0 0 var(--s-4);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.rp-warn-text strong { color: var(--ink); font-weight: 700; }

/* Línea de tiempo del ciclo: inicio del plan → hoy (la compra) → vencimiento
   común. Es el "ejemplo práctico", pero con las fechas reales del vendedor. */
.rp-tl {
  list-style: none;
  margin: 0 0 var(--s-4);
  padding: 0 0 0 var(--s-4);
  border-left: 2px solid color-mix(in srgb, var(--amber) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.rp-tl-node { position: relative; display: flex; flex-direction: column; gap: 1px; }
.rp-tl-node::before {
  content: '';
  position: absolute;
  left: calc(var(--s-4) * -1 - 6px);
  top: 4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--paper-deep);
  border: 2px solid color-mix(in srgb, var(--amber) 45%, transparent);
}
.rp-tl-node.is-now::before { background: var(--amber); border-color: var(--amber); }
.rp-tl-node.is-end::before { background: var(--ink); border-color: var(--ink); }
.rp-tl-date { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--ink); }
.rp-tl-lbl  { font-size: 12px; line-height: 1.45; color: var(--metal-soft); }
.rp-tl-node.is-end .rp-tl-lbl { color: var(--ink-soft); font-weight: 600; }

/* Lo que sí pasa vs. lo que la gente asume que pasa. */
.rp-ex-rows { display: flex; flex-direction: column; gap: var(--s-2); }
.rp-ex-row {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-2);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.rp-ex-row strong { color: var(--ink); font-weight: 700; }
.rp-ex-row s { color: var(--metal); text-decoration-thickness: 2px; }
.rp-ex-mark { flex-shrink: 0; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; margin-top: 1px; }
.rp-ex-row.is-ok { background: rgba(39, 194, 128, 0.10); border: 1px solid rgba(39, 194, 128, 0.26); }
.rp-ex-row.is-ok .rp-ex-mark { background: rgba(39, 194, 128, 0.2); color: var(--verified); }
.rp-ex-row.is-no { background: rgba(229, 72, 77, 0.09); border: 1px solid rgba(229, 72, 77, 0.24); }
.rp-ex-row.is-no .rp-ex-mark { background: rgba(229, 72, 77, 0.18); color: #f17178; }

/* Confirmación explícita antes de poder pagar los adicionales. */
.rp-ack {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-4);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color 160ms, background 160ms;
}
.rp-ack:hover { border-color: color-mix(in srgb, var(--amber) 45%, transparent); }
.rp-ack.is-checked {
  background: color-mix(in srgb, var(--verified) 8%, var(--paper));
  border-color: color-mix(in srgb, var(--verified) 38%, transparent);
}
.rp-ack input { flex-shrink: 0; width: 16px; height: 16px; margin-top: 1px; accent-color: var(--amber); cursor: pointer; }
.rp-ack strong { color: var(--ink); font-weight: 700; }

/* Botonera de los paneles que se pueden cancelar. */
.rp-actions { display: flex; align-items: stretch; gap: var(--s-3); }
.rp-actions .rp-buy-btn { flex: 1; }
.rp-ghost-btn {
  flex-shrink: 0;
  padding: 13px var(--s-5);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-3);
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 160ms, color 160ms;
}
.rp-ghost-btn:hover { border-color: var(--ink-soft); color: var(--ink); }
.rp-buy-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.rp-buy-btn:disabled:hover { background: var(--amber); box-shadow: none; transform: none; }

/* Próximo ciclo en la cabecera del módulo — lo que se va a cobrar en la
   renovación. En ámbar cuando difiere del plan vigente (hay un cambio
   agendado), neutro cuando renueva igual. */
.dr-next-plan {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--metal-soft);
}
.dr-next-plan svg { flex-shrink: 0; color: var(--metal); }
.dr-next-plan strong { color: var(--ink-soft); font-weight: 700; }
.dr-next-plan.is-changed { color: var(--amber); }
.dr-next-plan.is-changed svg { color: var(--amber); }
.dr-next-plan.is-changed strong { color: var(--amber); }
.dr-cycle-block .dr-account-sub strong { color: var(--ink-soft); font-weight: 700; }

/* Aviso de vencimiento repetido dentro de la pasarela de pago. */
.pm-expiry-note {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  margin-top: var(--s-3);
  padding: var(--s-3);
  background: color-mix(in srgb, var(--amber) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--amber) 36%, transparent);
  border-radius: var(--r-2);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.pm-expiry-note svg { flex-shrink: 0; margin-top: 1px; color: var(--amber); }
.pm-expiry-note strong { color: var(--ink); font-weight: 700; }

@media (max-width: 560px) {
  .rp-actions { flex-direction: column-reverse; }
  .rp-ghost-btn { width: 100%; }
  .rp-warn { flex-direction: column; }
}


/* ── Estado vacío: perfil activo, sin anuncios aún ── */
.rp-empty {
  text-align: center;
  padding: var(--s-8) var(--s-5);
  background: var(--paper);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-4);
}
.rp-empty-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--s-4);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--paper-deep);
  color: var(--metal-soft);
}
.rp-empty-title { font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--ink); margin: 0 0 var(--s-2); }
.rp-empty-sub { font-size: 14px; color: var(--ink-soft); margin: 0 auto var(--s-5); max-width: 380px; line-height: 1.55; }
.rp-empty-sub strong { color: var(--amber); }
.rp-empty-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px var(--s-5);
  border: none;
  border-radius: var(--r-3);
  background: var(--accent);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 160ms, transform 160ms, box-shadow 160ms;
}
.rp-empty-btn:hover { background: var(--accent-deep); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(232,97,78,0.3); }

/* ── Pago de mejoras: banner de saldo wallet aplicado + excedente ── */
.pm-wallet-banner {
  margin-bottom: var(--s-4);
  padding: var(--s-4);
  background: color-mix(in srgb, var(--verified) 8%, var(--paper-deep));
  border: 1px solid color-mix(in srgb, var(--verified) 28%, var(--line-strong));
  border-radius: var(--r-3);
}
.pm-wallet-banner-head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
  color: var(--verified);
  font-size: 13px;
  font-weight: 600;
}
.pm-wallet-banner-head strong { margin-left: auto; font-family: var(--font-mono); font-size: 15px; color: var(--ink); }
.pm-wallet-banner-rows { display: flex; flex-direction: column; gap: var(--s-2); }
.pm-wallet-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  font-size: 13px;
  color: var(--ink-soft);
}
.pm-wallet-row strong { font-family: var(--font-mono); font-weight: 600; color: var(--ink); }
.pm-wallet-row.is-due strong { color: var(--accent); }

/* ── Incentivo de recarga (saldo insuficiente) ──
   Va en ámbar, no en verde: no es un hecho consumado como el saldo aplicado,
   es una oferta. El número grande del encabezado es el bono — el ahorro. */
.pm-topup {
  margin-bottom: var(--s-4);
  padding: var(--s-4);
  background: color-mix(in srgb, var(--amber) 9%, var(--paper-deep));
  border: 1px solid color-mix(in srgb, var(--amber) 32%, var(--line-strong));
  border-left: 3px solid var(--amber);
  border-radius: var(--r-3);
}
.pm-topup-head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--amber);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  margin-bottom: var(--s-2);
}
.pm-topup-head svg { flex: none; }
.pm-topup-head strong { font-size: 16px; font-family: var(--font-mono); }
.pm-topup-lead {
  margin: 0 0 var(--s-3);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.pm-topup-lead strong { color: var(--ink); font-weight: 700; }
.pm-topup-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--s-3);
  background: color-mix(in srgb, var(--paper-deep) 70%, transparent);
  border-radius: var(--r-2);
}
.pm-topup-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  font-size: 12.5px;
  color: var(--ink-soft);
}
.pm-topup-row strong { font-family: var(--font-mono); font-weight: 600; color: var(--ink); }
.pm-topup-row em { font-style: normal; color: var(--metal); font-size: 11px; }
.pm-topup-row.is-bonus, .pm-topup-row.is-bonus strong { color: var(--verified); }
.pm-topup-row.is-total {
  padding-top: 6px;
  border-top: 1px solid var(--line);
}
.pm-topup-row.is-total strong { font-size: 14px; }
.pm-topup-cta {
  margin-top: var(--s-3);
  width: 100%;
  padding: 10px var(--s-4);
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-sans);
  color: var(--paper-deep);
  background: var(--amber);
  border: none;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: filter 160ms, transform 160ms;
}
.pm-topup-cta:hover { filter: brightness(1.08); transform: translateY(-1px); }
.pm-topup-cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.pm-wallet-row.is-covered strong { color: var(--verified); }
.pm-card-fields-hint { font-size: 12px; color: var(--metal-soft); margin: 0 0 var(--s-3); }

.pm-summary-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-2);
  font-size: 13px;
  color: var(--verified);
}
.pm-summary-line strong { font-family: var(--font-mono); font-weight: 600; }
.dz-cart-total-row.dz-cart-grand { margin-top: var(--s-3); border-top-style: solid; }

/* ── Selector wallet / tarjeta cuando el saldo cubre el total ── */
.pm-wallet-banner.pm-wallet-choice { background: color-mix(in srgb, var(--verified) 6%, var(--paper-deep)); }
.pm-choice-hint { font-size: 12.5px; color: var(--ink-soft); margin: var(--s-3) 0 var(--s-3); }
.pm-method-choice { display: flex; flex-direction: column; gap: var(--s-2); }
.pm-method-opt {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--paper);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-2);
  cursor: pointer;
  transition: border-color 150ms, background 150ms;
}
.pm-method-opt:hover { border-color: var(--metal); }
.pm-method-opt.is-active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--paper)); }
.pm-method-opt input { position: absolute; opacity: 0; pointer-events: none; }
.pm-method-opt-icon { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; background: var(--paper-deep); color: var(--metal-soft); }
.pm-method-opt.is-active .pm-method-opt-icon { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.pm-method-opt-text { display: flex; flex-direction: column; gap: 1px; }
.pm-method-opt-text strong { font-size: 14px; color: var(--ink); font-weight: 600; }
.pm-method-opt-text small { font-size: 11.5px; color: var(--metal-soft); }

/* Selector de comprobante (factura / tiquete). Reusa la tarjeta de .pm-method-opt
   del selector wallet/tarjeta para que los dos elegibles del pago se lean igual;
   solo se le da aire antes de los campos de la factura. */
.pm-receipt-choice { margin-bottom: var(--s-4); }
.pm-receipt-choice + .pm-billing-fields { margin-top: 0; }

/* Qué pasa después de pagar, dicho justo antes del botón. */
.pm-receipt-note {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink-soft);
  text-align: center;
  margin: var(--s-3) 0 calc(-1 * var(--s-1));
}

/* ============================================================================
   WALLET — vista interna (saldo, recarga, oferta, historial de movimientos)
   ========================================================================= */
.wallet-view {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  animation: fadeUp 320ms var(--ease-out) both;
}

/* Hero de saldo */
.wallet-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  padding: var(--s-6);
  border-radius: var(--r-4);
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--verified) 22%, transparent) 0%, transparent 55%),
    var(--paper);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-md);
}
.wallet-hero-left { display: flex; flex-direction: column; gap: 3px; }
.wallet-hero-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--metal); }
.wallet-hero-balance { font-family: var(--font-display); font-size: clamp(34px, 6vw, 46px); font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--ink); }
.wallet-hero-note { font-size: 12.5px; color: var(--ink-soft); margin-top: 4px; }
/* /wallet para el vendedor individual: aviso + camino a los planes. */
.wallet-locked {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  max-width: 420px;
  margin: var(--s-9) auto;
  padding: var(--s-7) var(--s-6);
  text-align: center;
  background: var(--paper-deep);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-4);
}
.wallet-locked-icon {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
}
.wallet-locked-msg {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}
.wallet-recharge-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px var(--s-5);
  border: none;
  border-radius: var(--r-pill);
  background: var(--verified);
  color: #04231a;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 160ms, box-shadow 160ms, transform 160ms;
}
.wallet-recharge-btn:hover { background: color-mix(in srgb, var(--verified) 86%, #000); box-shadow: 0 6px 18px color-mix(in srgb, var(--verified) 34%, transparent); transform: translateY(-1px); }

/* Banner de oferta */
.wallet-offer {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-3);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, transparent), color-mix(in srgb, var(--accent) 4%, transparent));
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
}
.wallet-offer-tag {
  align-self: flex-start;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 10px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: var(--r-pill);
}
.wallet-offer-body { display: flex; align-items: center; gap: var(--s-3); flex: 1; min-width: 200px; color: var(--accent); }
.wallet-offer-body p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.wallet-offer-body strong { color: var(--accent); }
.wallet-offer-btn {
  padding: 9px var(--s-4);
  border: 1px solid var(--accent);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--accent);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 150ms, color 150ms;
  white-space: nowrap;
}
.wallet-offer-btn:hover { background: var(--accent); color: #fff; }

/* Historial de movimientos */
.wallet-history {
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-3);
  overflow: hidden;
}
.wallet-history-head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.wallet-history-count {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--metal-soft);
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--paper-deep);
}
.wallet-history-list { display: flex; flex-direction: column; }
.wallet-move {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  border-bottom: 1px solid var(--line);
}
.wallet-move:last-child { border-bottom: none; }
.wallet-move-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
}
.wallet-move-icon.is-in  { background: color-mix(in srgb, var(--verified) 15%, transparent); color: var(--verified); }
.wallet-move-icon.is-out { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.wallet-move-body { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.wallet-move-label { font-size: 14px; font-weight: 600; color: var(--ink); }
.wallet-move-sub { font-size: 11.5px; color: var(--metal-soft); }
.wallet-move-amt { font-family: var(--font-mono); font-size: 14px; font-weight: 700; white-space: nowrap; }
.wallet-move-amt.is-in  { color: var(--verified); }
.wallet-move-amt.is-out { color: var(--ink-soft); }
.wallet-empty { padding: var(--s-6); text-align: center; font-size: 13px; color: var(--metal-soft); }
.wallet-empty p { margin: 0 0 var(--s-4); }
.wallet-empty-btn {
  padding: 10px 20px;
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: var(--r-2);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.wallet-empty-btn:hover { background: var(--accent-deep); }

/* ¿Qué puede hacer con su saldo? */
.wallet-uses {
  margin: var(--s-5) 0;
  padding: var(--s-5);
  background: var(--paper-deep);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-3);
}
.wallet-uses-title { margin: 0 0 var(--s-3); font-size: 16px; font-weight: 700; color: var(--ink); }
.wallet-uses-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.wallet-uses-list li { display: flex; flex-direction: column; gap: 2px; }
.wallet-uses-list strong { font-size: 14px; color: var(--ink); }
.wallet-uses-list span { font-size: 13px; line-height: 1.5; color: var(--ink-soft); }

/* Aviso de plan de espacios vencido */
.wallet-expired {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
  padding: var(--s-4) var(--s-5);
  background: color-mix(in srgb, var(--accent) 10%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line-strong));
  border-radius: var(--r-3);
}
.wallet-expired-icon { flex-shrink: 0; display: flex; color: var(--accent-deep); }
.wallet-expired-icon svg { width: 22px; height: 22px; }
.wallet-expired-body { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--ink-soft); }
.wallet-expired-body strong { font-size: 14px; color: var(--ink); }
.wallet-expired-btn {
  flex-shrink: 0;
  padding: 9px 18px;
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: var(--r-2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.wallet-expired-btn:hover { background: var(--accent-deep); }
@media (max-width: 640px) {
  .wallet-expired { flex-direction: column; align-items: stretch; text-align: left; }
}

/* Modal de recarga — reusa la caja del wallet-page en columna centrada */
/* .auth-modal no trae padding propio — cada modal lo pone. Este se había
   quedado sin ninguno y el contenido tocaba los bordes. Mismo encuadre que
   .cookie-modal: s-6 arriba y a los lados, s-5 abajo (el botón ya pesa). */
.wallet-recharge-modal {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-4);
  padding: var(--s-6) var(--s-6) var(--s-5);
  max-height: 92vh;
  overflow-y: auto;
}

@media (max-width: 540px) {
  .wallet-hero { padding: var(--s-5); }
  .wallet-recharge-btn { width: 100%; justify-content: center; }
  .wallet-offer-btn { width: 100%; }
  /* Un escalón menos de encuadre: el desglose lleva etiquetas largas y a
     este ancho los 32px laterales le comen demasiada caja. */
  .wallet-recharge-modal { padding: var(--s-5) var(--s-4) var(--s-4); }
}

/* ============================================================================
   CONTÁCTENOS (#view-contacto) — página de soporte. Hero propio + dos
   columnas: canales directos a la izquierda, formulario a la derecha. El
   formulario reutiliza .field-group / .field-row-2 / .field-error del sistema
   de formularios del sitio, y el captcha hereda de .bb-captcha (bluebook).
   ========================================================================= */
.ct-hero {
  background: linear-gradient(135deg, #2b1a1c 0%, #46231d 55%, #24161a 100%);
  padding: 72px var(--s-6) 56px;
  text-align: center;
}
.ct-hero-content { max-width: 640px; margin: 0 auto; }
.ct-hero-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(232, 97, 78, 0.14);
  padding: 5px 14px;
  border-radius: var(--r-pill);
  margin-bottom: var(--s-3);
}
.ct-hero-title {
  font-size: clamp(28px, 4.5vw, 44px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 var(--s-3);
}
.ct-hero-sub {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.5;
  margin: 0 auto;
}

.ct-section {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--s-7) var(--s-6) var(--s-9);
}
.ct-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: var(--s-7);
  align-items: start;
}

/* ── Columna izquierda: texto y canales directos ── */
.ct-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 var(--s-3);
}
.ct-text {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 var(--s-5);
  max-width: 46ch;
}

.ct-channels {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.ct-channel {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-3);
  background: var(--paper);
  text-decoration: none;
  transition: border-color 180ms, background 180ms, transform 180ms var(--ease-out);
}
.ct-channel:hover {
  border-color: var(--accent);
  background: var(--paper-warm);
  transform: translateY(-1px);
}
.ct-channel-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: var(--r-2);
  background: rgba(232, 97, 78, 0.12);
  color: var(--accent);
}
.ct-channel-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ct-channel-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--metal-soft);
}
.ct-channel-value {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
}
.ct-hours {
  font-size: 12.5px;
  color: var(--metal-soft);
  margin: var(--s-4) 0 0;
}

/* ── Columna derecha: formulario de mensaje ── */
.ct-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-5);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-4);
  background: var(--paper);
  box-shadow: var(--shadow-md);
}
.ct-form-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}
.ct-form textarea { min-height: 110px; }

/* Solo se le quita el margen inferior heredado de .bb-captcha: el gap del
   formulario ya lo separa del resto. */
.ct-captcha { margin-bottom: 0; }

/* CTA coral, mismo lenguaje que el botón "Continuar" del wizard de venta. */
.ct-submit {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  color: #fff;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 600;
  padding: 12px 26px;
  border-radius: var(--r-2);
  transition: background 200ms, transform 200ms var(--ease-out), box-shadow 200ms;
}
.ct-submit svg { width: 16px; height: 16px; stroke-width: 2; flex-shrink: 0; }
.ct-submit:hover:not(:disabled) {
  background: var(--accent-deep);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(232, 97, 78, 0.35);
}
.ct-submit:active:not(:disabled) { transform: scale(0.98); }
.ct-submit:disabled { opacity: 0.6; cursor: not-allowed; }

.ct-legal {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--metal-soft);
  margin: 0;
}
.ct-legal a { color: var(--ink-soft); text-decoration: underline; }
.ct-legal a:hover { color: var(--accent); }

@media (max-width: 900px) {
  .ct-section { padding: var(--s-6) var(--s-4) var(--s-8); }
  .ct-grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .ct-text { max-width: none; }
  .ct-submit { align-self: stretch; justify-content: center; }
}
@media (max-width: 640px) {
  .ct-hero { padding: 48px var(--s-4) 36px; }
  .ct-title { font-size: 22px; }
}
@media (max-width: 540px) {
  .ct-form { padding: var(--s-4); }
  /* El captcha en columna: el sello de reCAPTCHA no cabe al lado del check. */
  .ct-captcha { flex-direction: column; align-items: flex-start; gap: var(--s-3); }
}

/* ============================================================================
   FOOTER — transversal, vive dentro de #app como hermano final de todas las
   .view (una sola instancia; se ve al pie de la vista activa sea cual sea,
   ya que las vistas inactivas son display:none, no absolute).
   ========================================================================= */
.site-footer {
  border-top: 1px solid var(--line-strong);
  background: var(--paper-deep);
}

/* Enlace "Contáctenos" en la columna de marca del footer: mismo estilo de
   text-link del resto del pie, con un poco de aire respecto a los datos de
   contacto que lo preceden. */
.footer-contact-link { margin-top: var(--s-2); }
.site-footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--s-8) var(--s-6) var(--s-6);
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: var(--s-7);
}
.site-footer-col {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.site-footer-policies { align-items: center; text-align: center; }
.site-footer-social { align-items: flex-end; text-align: right; }

.footer-logo { font-size: 22px; }

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 2px;
}
.footer-contact-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 150ms;
}
.footer-contact-item svg { flex-shrink: 0; color: var(--accent); }
.footer-contact-item:hover { color: var(--ink); }

.footer-col-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.footer-col-text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
  max-width: 30ch;
}

/* Enlace estilo "text link": sin fondo ni borde, subrayado que crece en
   hover — deliberadamente distinto de los botones/pills del resto del
   sitio para leerse como enlace de texto plano. */
.footer-textlink {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  padding-bottom: 2px;
  transition: background-size 200ms ease, color 150ms;
}
.footer-textlink:hover { background-size: 100% 1px; color: var(--accent-deep); }

.footer-social-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  transition: border-color 150ms, color 150ms, background 150ms;
}
.footer-social-link:hover {
  border-color: #1877F2;
  color: #1877F2;
  background: rgba(24, 119, 242, 0.1);
}

.site-footer-bottom {
  border-top: 1px solid var(--line);
  padding: var(--s-4) var(--s-6);
  text-align: center;
  font-size: 12px;
  color: var(--ink-soft);
}

@media (max-width: 760px) {
  .site-footer-inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--s-6);
    padding: var(--s-7) var(--s-4) var(--s-5);
  }
  .site-footer-brand,
  .site-footer-social { align-items: center; text-align: center; }
  .footer-col-text { max-width: 40ch; margin: 0 auto; }
}

/* ==========================================================================
   CONSENTIMIENTO DE COOKIES — banner de primer contacto + centro de
   preferencias. El banner es no bloqueante (deja ver e interactuar con el
   fondo); el centro de preferencias sí es un modal con foco atrapado.
   ========================================================================== */

/* ── Banner ── */
.cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 150;                     /* sobre el contenido, bajo los modales */
  padding: var(--s-4);
  display: flex;
  justify-content: center;
  pointer-events: none;             /* solo el card interior recibe eventos */
  transform: translateY(120%);
  transition: transform 420ms var(--ease-expo);
}
.cookie-banner.is-open { transform: translateY(0); }
.cookie-banner-inner {
  pointer-events: auto;
  width: 100%;
  max-width: 1080px;
  background: var(--glass-card);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-lg);
  padding: var(--s-5);
  display: flex;
  align-items: flex-start;
  gap: var(--s-5);
}
.cookie-banner-icon {
  width: 44px; height: 44px;
  flex: none;
  border-radius: var(--r-2);
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.cookie-banner-body { flex: 1; min-width: 0; }
.cookie-banner-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 6px;
}
.cookie-banner-text {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0 0 8px;
  max-width: 68ch;
}
.cookie-banner-link {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cookie-banner-link:hover { color: var(--accent-deep); }
.cookie-banner-actions {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  justify-content: center;
  align-self: center;
  min-width: 210px;
}

/* ── Botones de cookies (mismo peso visual aceptar/rechazar) ── */
.btn-cookie {
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 700;
  padding: 11px 18px;
  border-radius: var(--r-2);
  border: 1.5px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
  transition: background 180ms, border-color 180ms, color 180ms, filter 180ms;
}
.btn-cookie:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-cookie--solid { background: var(--accent); color: #fff; }
.btn-cookie--solid:hover { filter: brightness(1.06); }
.btn-cookie--outline { background: transparent; border-color: var(--metal); color: var(--ink); }
.btn-cookie--outline:hover { border-color: var(--ink); background: var(--paper-warm); }
.btn-cookie--ghost { background: transparent; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; padding: 11px 8px; }
.btn-cookie--ghost:hover { color: var(--ink); }
.btn-cookie:disabled { opacity: .6; cursor: default; filter: none; }

/* ── Centro de preferencias (modal) ── */
.cookie-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(4px);
  z-index: 650;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 250ms var(--ease-out);
}
.cookie-overlay.is-open { opacity: 1; pointer-events: all; }
.cookie-modal {
  background: var(--paper-deep);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-4);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 520px;
  position: relative;
  max-height: 92vh;
  overflow-y: auto;
  padding: var(--s-6) var(--s-6) var(--s-5);
  transform: scale(0.96) translateY(8px);
  transition: transform 300ms var(--ease-expo);
}
.cookie-overlay.is-open .cookie-modal { transform: scale(1) translateY(0); }
.cookie-close { top: var(--s-4); right: var(--s-4); }
.cookie-modal-head { margin: 0 var(--s-6) var(--s-5) 0; }
.cookie-modal-title { font-family: var(--font-display); font-size: 20px; font-weight: 800; margin: 0 0 6px; }
.cookie-modal-sub { font-size: 13px; color: var(--ink-soft); line-height: 1.55; margin: 0; }

.cookie-cats {
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  overflow: hidden;
}
.cookie-cat { border-bottom: 1px solid var(--line); }
.cookie-cat:last-child { border-bottom: none; }
.cookie-cat-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding-right: var(--s-4); }
.cookie-cat-head {
  flex: 1;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  background: none; border: none; cursor: pointer;
  padding: var(--s-4);
  text-align: left;
  color: var(--ink);
  font-family: var(--font-sans);
}
.cookie-cat-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--r-2); }
.cookie-cat-name { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 700; }
.cookie-cat-chevron { color: var(--metal); transition: transform 200ms var(--ease-out); flex: none; }
.cookie-cat-head[aria-expanded="true"] .cookie-cat-chevron { transform: rotate(90deg); }
.cookie-lock {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--metal-soft);
  background: var(--paper-warm);
  padding: 4px 9px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.cookie-cat-desc {
  padding: 0 var(--s-4) var(--s-4) 39px;
  font-size: 12.8px;
  color: var(--ink-soft);
  line-height: 1.6;
}
.cookie-cat-desc[hidden] { display: none; }

/* ── Switch ── */
.cookie-switch {
  position: relative;
  width: 42px; height: 24px;
  flex: none;
  border-radius: var(--r-pill);
  background: var(--paper-warm);
  border: 1px solid var(--line-strong);
  cursor: pointer;
  padding: 0;
  transition: background 180ms, border-color 180ms;
}
.cookie-switch-knob {
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--metal-soft);
  box-shadow: var(--shadow-sm);
  transition: transform 180ms var(--ease-out), background 180ms;
}
.cookie-switch[aria-checked="true"] { background: var(--verified); border-color: var(--verified); }
.cookie-switch[aria-checked="true"] .cookie-switch-knob { transform: translateX(18px); background: #fff; }
.cookie-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Pie del modal ── */
.cookie-modal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-top: var(--s-5);
}
.cookie-modal-policy { font-size: 12.5px; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; }
.cookie-modal-policy:hover { color: var(--ink); }
.cookie-modal-actions { display: flex; gap: var(--s-2); }
.cookie-withdraw {
  display: block;
  margin: var(--s-4) auto 0;
  background: none;
  border: none;
  color: var(--metal-soft);
  font-size: 12.5px;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  padding: 6px;
}
.cookie-withdraw:hover { color: #e5484d; }
.cookie-withdraw:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-1); }

.cookie-confirm-overlay { z-index: 700; }

/* ── Responsive ── */
@media (max-width: 720px) {
  .cookie-banner-inner { flex-direction: column; gap: var(--s-4); }
  .cookie-banner-actions { min-width: 0; width: 100%; }
  .btn-cookie { width: 100%; }
  .btn-cookie--ghost { order: 3; }        /* configurar al final en mobile */
  .cookie-modal-foot { flex-direction: column; align-items: stretch; }
  .cookie-modal-actions { flex-direction: column; }
  .cookie-modal-policy { text-align: center; margin-bottom: var(--s-2); }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-banner,
  .cookie-modal,
  .cookie-switch-knob,
  .cookie-cat-chevron { transition: none; }
}


/* =============================================================================
   MODELOS NUEVOS (0 km) — catálogo de agencia + ficha interna del modelo
   =============================================================================
   Prefijo `.mn-`. Dos piezas:
     1. `.modelos-*`  — tarjetas de modelo dentro de la vista "Autos nuevos".
     2. `.mn-*`       — la ficha interna (#view-modelo-nuevo).
   Reutiliza los tokens y los patrones ya existentes (.ea-input para el
   formulario, .tabs-nav/.tab-btn para las pestañas) para no duplicar estilos. */

/* ----------  1 · Tarjetas de modelo en la vista Nuevos  ---------- */
.modelos-section {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--s-6) var(--s-7);
}
/* Card de modelo — misma anatomía que la card horizontal de resultados
   (.results-grid.view-list .card): una sola columna, foto 240×180 a la
   izquierda, identidad + specs al centro y el precio anclado a la derecha.
   No comparte las clases de .card porque los datos son distintos (un modelo
   de catálogo no tiene km, vendedor ni placa), pero sí las medidas. */
.modelos-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-3);
}
.modelo-card {
  display: flex;
  flex-direction: row;
  height: 180px;
  text-align: left;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  overflow: hidden;
  cursor: pointer;
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0,0,0,0.25), 0 4px 12px rgba(0,0,0,0.2);
  transition: transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out), border-color 320ms;
}
.modelo-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--line-strong);
}

.modelo-card-media {
  position: relative;
  width: 240px;
  min-width: 240px;
  background: var(--paper-deep);
  overflow: hidden;
}
.modelo-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.modelo-card-body {
  position: relative;
  flex: 1;
  min-width: 0;
  padding: var(--s-4) var(--s-5);
  padding-right: 210px;          /* espacio reservado para el precio */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  overflow: hidden;
}
.modelo-card-title-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.modelo-card-brand {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.1;
}
.modelo-card-model {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.modelo-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: var(--s-1);
}
.modelo-card-meta-item { display: flex; align-items: center; gap: 5px; }
.modelo-card-meta-item + .modelo-card-meta-item::before {
  content: '·';
  color: var(--metal);
  margin-right: 5px;
}
.modelo-card-dealer {
  font-size: 12px;
  font-weight: 600;
  color: var(--verified);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Precio: fuera del flujo y centrado en vertical, como en la card de
   resultados en desktop (ver la nota de .results-grid.view-list .card-body). */
.modelo-card-price-block {
  position: absolute;
  top: 50%;
  right: var(--s-5);
  transform: translateY(-50%);
  min-width: 180px;
  text-align: right;
}
.modelo-card-price-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--metal);
  margin-bottom: 2px;
}
.modelo-card-price {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
}
.modelo-card-price .currency {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--metal);
  font-weight: 400;
  margin-right: 1px;
}
.modelo-card-price-usd {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--metal);
  margin-top: 3px;
}

/* ── Mobile: mismas medidas que la card de resultados en lista (128px) ── */
@media (max-width: 900px) {
  .modelo-card { height: 128px; }
  .modelo-card-media {
    width: 128px;
    min-width: 128px;
  }
  .modelo-card-body {
    padding: var(--s-3);
    padding-right: var(--s-3);
    gap: 3px;
  }
  /* Sin espacio para la columna de precio: pasa al flujo, bajo las specs. */
  .modelo-card-price-block {
    position: static;
    transform: none;
    min-width: 0;
    text-align: left;
    margin-top: 2px;
  }
  .modelo-card-price-label,
  .modelo-card-price-usd,
  .modelo-card-dealer { display: none; }
  .modelo-card-meta { font-size: 11px; gap: 4px 8px; }
}

/* ----------  2 · Ficha interna del modelo  ---------- */
.mn-section {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--s-5) var(--s-6) var(--s-8);
}

/* Migas */
.mn-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 12.5px;
  color: var(--metal);
  margin-bottom: var(--s-5);
  flex-wrap: wrap;
}
.mn-breadcrumb svg { flex-shrink: 0; opacity: 0.6; }
.mn-crumb {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color 150ms;
}
.mn-crumb:hover { color: var(--accent); }
.mn-crumb-current { color: var(--ink); font-weight: 600; }

/* Botón "Volver" del breadcrumb — texto plano con flecha, igual que
   .ficha-back en la ficha de usados. */
.mn-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  background: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  flex-shrink: 0;
}
.mn-back:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Separador vertical entre el botón y la ruta */
.mn-back-sep {
  width: 1px;
  height: 18px;
  background: var(--line-strong);
  flex-shrink: 0;
}

/* ── Bloque superior: identidad + galería ── */
.mn-hero {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: var(--s-5);
  align-items: start;
}

/* Placa de identidad */
.mn-identity {
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-3);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  position: sticky;
  top: calc(var(--header-h) + var(--s-4));
}
.mn-plate {
  background: linear-gradient(160deg, var(--paper-warm), var(--paper-deep));
  border-bottom: 1px solid var(--line-strong);
  padding: var(--s-5) var(--s-4) var(--s-4);
  text-align: center;
}
.mn-plate-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 132px;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--paper-deep);
  border-radius: var(--r-2);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.18em;
  margin-bottom: var(--s-3);
}
/* Con logo real la placa deja de ser una caja de texto: se le da alto fijo y
   se quita el tracking, que solo aplicaba al monograma. */
.mn-plate-logo--img {
  display: block;          /* ver nota en .brand-tile-plate */
  width: 156px;
  height: 56px;
  padding: 10px 20px;
  letter-spacing: 0;
}
.mn-plate-logo--img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.mn-plate-model {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.mn-plate-version {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 5px;
}
.mn-identity-body {
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.mn-zero-badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: var(--eco-soft);
  border: 1px solid var(--eco-border);
  color: var(--eco);
  font-size: 11px;
  font-weight: 600;
}
.mn-tagline {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}
.mn-price-block {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--s-3) 0;
}
.mn-price-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--metal);
  margin-bottom: 4px;
}
.mn-price {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.1;
}
.mn-price .currency { font-size: 16px; color: var(--metal-soft); margin-right: 2px; }
.mn-price-usd {
  font-size: 12px;
  color: var(--metal-soft);
  margin-top: 3px;
}
.mn-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 12px var(--s-4);
  border: 1px solid transparent;
  border-radius: var(--r-2);
  background: var(--accent);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 180ms, border-color 180ms, color 180ms, transform 150ms var(--ease-out);
}
.mn-cta:hover { background: var(--accent-deep); }
.mn-cta:active { transform: scale(0.985); }
.mn-cta--ghost {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink);
}
.mn-cta--ghost:hover { background: var(--paper-warm); border-color: var(--accent); color: var(--accent); }

/* ── Galería ── */
.mn-gallery {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-width: 0;
}
.mn-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-3);
  overflow: hidden;
  background: var(--paper-deep);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-md);
}
.mn-stage-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  animation: mnFade 420ms var(--ease-out);
}
@keyframes mnFade { from { opacity: 0; } to { opacity: 1; } }

.mn-gal-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(20, 22, 34, 0.55);
  backdrop-filter: blur(10px);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transition: opacity 200ms, background 180ms, border-color 180ms;
}
.mn-stage:hover .mn-gal-arrow,
.mn-gal-arrow:focus-visible { opacity: 1; }
.mn-gal-arrow:hover { background: var(--accent); border-color: var(--accent); }
.mn-gal-arrow svg { width: 18px; height: 18px; }
.mn-gal-prev { left: var(--s-3); }
.mn-gal-next { right: var(--s-3); }

.mn-gal-counter {
  position: absolute;
  bottom: var(--s-3);
  left: var(--s-3);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: rgba(20, 22, 34, 0.62);
  backdrop-filter: blur(10px);
  font-family: var(--font-mono);
  font-size: 11px;
  color: #fff;
  letter-spacing: 0.06em;
}
.mn-gal-dots {
  position: absolute;
  bottom: var(--s-3);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 7px;
}
.mn-gal-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: none;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: background 180ms, width 220ms var(--ease-out);
}
.mn-gal-dot.is-active { background: #fff; width: 20px; }

.mn-thumbs {
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.mn-thumbs::-webkit-scrollbar { display: none; }
.mn-thumb {
  width: 96px;
  height: 62px;
  flex-shrink: 0;
  padding: 0;
  border-radius: var(--r-2);
  overflow: hidden;
  border: 2px solid transparent;
  background: var(--paper-deep);
  cursor: pointer;
  opacity: 0.6;
  transition: border-color 150ms, opacity 150ms;
}
.mn-thumb:hover { opacity: 1; }
.mn-thumb.is-active { border-color: var(--accent); opacity: 1; }
.mn-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Datos rápidos ── */
.mn-highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--s-3);
  margin: var(--s-6) 0 0;
}
.mn-hl {
  padding: var(--s-4);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
}
.mn-hl-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--metal);
  margin-bottom: 6px;
}
.mn-hl-value {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
}

/* ── Bloques de sección ── */
.mn-block { margin-top: var(--s-8); }
.mn-block-head { margin-bottom: var(--s-4); }
.mn-block-title {
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
}
.mn-block-sub {
  font-size: 13.5px;
  color: var(--ink-soft);
  margin: 0;
}

/* Otras versiones — mini card horizontal (foto + datos + acción). No es un
   control de selección: cada una abre la publicación de esa versión, así que
   no hay estado "activa" ni check; la versión que se está viendo ni aparece. */
/* Tope de 560px: con una sola "otra versión" un 1fr estiraba la card a todo el
   ancho de la página y dejaba un vacío enorme entre los datos y la acción. */
.mn-versions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 560px));
  gap: var(--s-3);
}
.mn-version {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  height: 112px;
  padding: 0;
  overflow: hidden;
  text-align: left;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-3);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 160ms, transform 160ms var(--ease-out), box-shadow 160ms;
}
.mn-version:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.mn-version-media {
  width: 150px;
  min-width: 150px;
  background: var(--paper-deep);
  overflow: hidden;
}
.mn-version-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mn-version-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: var(--s-3) var(--s-4);
}
.mn-version-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.mn-version-sum {
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mn-version-price {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin-top: 2px;
}
/* Acción a la derecha: en el ancho completo se lee el texto; si la card se
   angosta queda solo la flecha, sin romper la línea. */
.mn-version-go {
  display: flex;
  align-items: center;
  gap: 6px;
  align-self: center;
  padding: 0 var(--s-4);
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}
.mn-version-go svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform 160ms var(--ease-out);
}
.mn-version:hover .mn-version-go svg { transform: translateX(3px); }

@media (max-width: 720px) {
  .mn-versions { grid-template-columns: minmax(0, 1fr); }
  .mn-version { height: 96px; }
  .mn-version-media { width: 118px; min-width: 118px; }
  .mn-version-info { padding: var(--s-2) var(--s-3); }
  .mn-version-name { font-size: 14px; }
  .mn-version-sum { -webkit-line-clamp: 1; }
  .mn-version-price { font-size: 14px; }
  /* Sin espacio para la etiqueta: queda la flecha sola como afordancia. */
  .mn-version-go { padding: 0 var(--s-3); font-size: 0; gap: 0; }
  .mn-version-go svg { width: 16px; height: 16px; }
}

/* ── Pestañas ficha técnica / equipamiento ── */
.mn-tabs-nav { margin-bottom: var(--s-4); }
.mn-tab-panel { display: none; }
.mn-tab-panel.is-active { display: block; animation: mnFade 260ms var(--ease-out); }

/* Tabla de especificaciones — filas etiqueta/valor alternadas, el mismo
   patrón de lectura de la ficha impresa de agencia pero con nuestros tokens. */
.mn-spec-table {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-3);
  overflow: hidden;
}
.mn-spec-group {
  padding: var(--s-3) var(--s-4);
  background: var(--paper-deep);
  border-top: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.mn-spec-group:first-child { border-top: none; }
.mn-spec-row {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--s-4);
  padding: 11px var(--s-4);
  border-top: 1px solid var(--line);
  background: var(--paper);
  transition: background 140ms;
}
/* Zebra: la clase la pone el JS (is-odd) porque las filas van intercaladas
   con los encabezados de grupo y :nth-child no las cuenta por separado. */
.mn-spec-row.is-odd { background: var(--paper-warm); }
.mn-spec-row:hover { background: var(--paper-deep); }
.mn-spec-label {
  font-size: 12.5px;
  color: var(--ink-soft);
}
.mn-spec-value {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.mn-spec-value.is-nd { color: var(--metal); font-style: italic; }
/* El precio y la versión son los dos datos que se leen primero */
.mn-spec-value.is-key {
  font-family: var(--font-mono);
  font-weight: 600;
}

/* ── Equipamiento ── */
.mn-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-4);
}
.mn-feature-group {
  padding: var(--s-4);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
}
.mn-feature-title {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s-3);
}
.mn-feature-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.mn-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.45;
}
.mn-feature-list li::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-top: 6px;
  border-radius: var(--r-pill);
  background: var(--eco);
}

/* ── Formulario de solicitud ── */
.mn-lead {
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-3);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.mn-lead-head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  background: linear-gradient(90deg, rgba(39, 194, 128, 0.16), transparent);
  border-bottom: 1px solid var(--line-strong);
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
}
.mn-lead-head svg { flex-shrink: 0; color: var(--eco); }
.mn-lead-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
  padding: var(--s-5);
}
.mn-field-full { grid-column: 1 / -1; }
.mn-opt {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--metal);
}
.mn-textarea {
  resize: vertical;
  min-height: 96px;
  line-height: 1.5;
  font-family: var(--font-sans);
}
.mn-lead-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--line);
  background: var(--paper-deep);
}
.mn-lead-note {
  font-size: 12px;
  color: var(--metal-soft);
  margin: 0;
}
.mn-lead-submit {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 12px var(--s-5);
  border: none;
  border-radius: var(--r-2);
  background: var(--verified);
  color: #05231a;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 180ms, transform 150ms var(--ease-out);
}
.mn-lead-submit:hover { background: var(--verified-soft); color: #fff; }
.mn-lead-submit:active { transform: scale(0.985); }
/* Campo con error de validación */
.ea-input.mn-invalid {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(232, 97, 78, 0.14);
}

/* ── Distribuidor ── */
.mn-dealer {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-3);
  overflow: hidden;
}
.mn-dealer-photo {
  position: relative;
  min-height: 210px;
  background: var(--paper-deep);
}
.mn-dealer-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mn-dealer-body {
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.mn-dealer-kicker {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--metal);
}
.mn-dealer-name {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.mn-dealer-verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: var(--eco-soft);
  border: 1px solid var(--eco-border);
  color: var(--eco);
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0;
}
.mn-dealer-verified svg { width: 11px; height: 11px; }
.mn-dealer-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: var(--s-1);
}
.mn-dealer-row {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  font-size: 13px;
  color: var(--ink-soft);
  text-decoration: none;
  line-height: 1.45;
  transition: color 150ms;
}
a.mn-dealer-row:hover { color: var(--accent); }
.mn-dealer-row svg { flex-shrink: 0; width: 15px; height: 15px; margin-top: 1px; color: var(--metal); }
a.mn-dealer-row:hover svg { color: var(--accent); }
.mn-dealer-row strong { color: var(--ink); font-weight: 600; }

/* ----------  Responsive  ---------- */
@media (max-width: 1100px) {
  .mn-hero { grid-template-columns: 260px minmax(0, 1fr); }
  .mn-spec-row { grid-template-columns: 190px minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .mn-section { padding: var(--s-4) var(--s-4) var(--s-7); }
  .modelos-section { padding: 0 var(--s-4) var(--s-6); }
  /* La identidad pasa debajo de la galería y deja de ser sticky: en mobile
     compite con el header fijo y roba demasiada altura. */
  .mn-hero { grid-template-columns: 1fr; }
  .mn-identity { position: static; order: 2; }
  .mn-gallery { order: 1; }
  .mn-block { margin-top: var(--s-7); }
  .mn-dealer { grid-template-columns: 1fr; }
  .mn-dealer-photo { min-height: 180px; aspect-ratio: 16 / 9; }
  /* Sin hover en táctil las flechas nunca aparecerían */
  .mn-gal-arrow { opacity: 1; }
}

@media (max-width: 600px) {
  .mn-lead-grid { grid-template-columns: 1fr; }
  .mn-lead-foot { flex-direction: column; align-items: stretch; }
  .mn-lead-submit { justify-content: center; }
  /* La tabla pasa a etiqueta arriba / valor abajo — con 2 columnas a este
     ancho el valor queda en una tira de 3 caracteres por línea. */
  .mn-spec-row { grid-template-columns: 1fr; gap: 3px; }
  .mn-spec-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--metal); }
  .mn-highlights { grid-template-columns: 1fr 1fr; }
  .mn-gal-dots { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mn-stage-img,
  .mn-tab-panel.is-active { animation: none; }
  .modelo-card:hover { transform: none; }
  .mn-version:hover { transform: none; }
}

/* ============================================================================
   ALINEACIÓN DE LA TARJETA VERTICAL (grilla)
   Regla: todas las cards de vehículo miden lo mismo y tienen la marca, el
   modelo, las specs y el precio exactamente a la misma altura. Antes cada
   bloque crecía con su contenido (etiquetas pagadas, nombre del vendedor,
   specs que se parten en dos líneas, cuota + logo BAC solo en los autos
   financiables) y el precio bailaba entre 242px y 322px desde el borde.
   Ahora cada bloque del cuerpo reserva un alto fijo:
     · la franja de etiquetas y la línea del vendedor se emiten siempre,
       vacías si no aplican (ver vehicleCardHTML/cardCoreInfoHTML en app.js);
     · marca y modelo se limitan a una línea con elipsis;
     · la línea de specs reserva dos líneas fijas;
     · el bloque de precio reserva el alto de la cuota + el logo BAC, que en
       la card vertical pasan a compartir fila.
   La vista lista (.view-list) tiene su propio alto fijo (180px) y queda
   fuera de todas estas reglas.
   ========================================================================== */
.results-grid:not(.view-list) {
  --card-brand-h: 21px;
  --card-model-h: 16px;
  --card-specs-lh: 15px;
  --card-specs-h: 36px;
  --card-seller-h: 16px;
  /* Alto reservado del bloque de precio = precio (17px) + var(--s-2) +
     fila de la cuota, que la mide la píldora BAC (13px de logo + 8px de
     padding + 2px de borde = 23px). */
  --card-price-h: 48px;
}

/* Marca y modelo: una sola línea, con elipsis si no cabe. El nombre completo
   siempre está a un clic de distancia en la ficha. */
.results-grid:not(.view-list) .card-brand-mono,
.results-grid:not(.view-list) .card-model {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.results-grid:not(.view-list) .card-brand-mono {
  line-height: var(--card-brand-h);
  height: var(--card-brand-h);
}
.results-grid:not(.view-list) .card-model {
  line-height: var(--card-model-h);
  height: var(--card-model-h);
}

/* Specs: con cinco datos (año · transmisión · cilindrada · combustible ·
   pasajeros) la línea casi siempre se parte en dos, así que se reservan las
   dos líneas para todas y no solo para las que las ocupan. */
.results-grid:not(.view-list) .card-specs-line {
  line-height: var(--card-specs-lh);
  height: var(--card-specs-h);
  align-content: flex-start;
  overflow: hidden;
  margin-top: 0;
}

.results-grid:not(.view-list) .card-seller-verified {
  line-height: var(--card-seller-h);
  min-height: var(--card-seller-h);
  margin-top: 0;
}

/* Precio: bloque de alto reservado y anclado al pie del cuerpo. La cuota y el
   logo BAC comparten fila, así el hueco que dejan las tarjetas sin
   financiamiento es de una sola línea y no de dos. */
.results-grid:not(.view-list) .card-price-block {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* flex-start, no el 'stretch' por defecto: con align-content normal la
     única línea de las tarjetas sin cuota se estiraba a los 46px reservados
     y el precio quedaba centrado, 15px más abajo que en las que sí la
     tienen. Empacando arriba, el precio arranca en la misma coordenada. */
  align-content: flex-start;
  /* Escala de espaciado, no px sueltos (ver foundations §03): el paso
     intermedio de 4px no alcanza entre el precio y la fila cuota + píldora
     BAC, así que va el paso base de 8px. */
  gap: var(--s-2);
  min-height: var(--card-price-h);
  /* Offset fijo, NO 'margin-top:auto': anclarlo al pie ataría la posición del
     precio al alto de la fila, y bastaría una card más alta (una franja eco
     de dos líneas, por ejemplo) para desalinear a las demás. */
  margin-top: var(--s-1);
}
.results-grid:not(.view-list) .card-price-main,
.results-grid:not(.view-list) .card-eco-headline {
  flex: 0 0 100%;
}
.results-grid:not(.view-list) .card-cuota,
.results-grid:not(.view-list) .card-eco-detail,
.results-grid:not(.view-list) .card-price-block .card-finance-badge {
  margin-top: 0;
}
.results-grid:not(.view-list) .card-cuota { white-space: nowrap; }
.results-grid:not(.view-list) .card-price-block .card-finance-badge { flex-shrink: 0; }

/* La franja eco va después del precio; con el precio anclado abajo, se ancla
   ella y el precio sube justo lo que mide la franja — igual en todas. */
.results-grid:not(.view-list) .eco-saving-strip { margin-top: var(--s-2); }

/* Diagramación 'finance': el badge del banco se reserva siempre (ver
   financeBadgeSlotHTML) para que la cuota, el precio de contado y los
   términos queden a la misma altura tengan o no financiamiento. */
.card-finance-badge.is-empty {
  background: transparent;
  border-color: transparent;
}
.card-finance-badge.is-empty::before {
  content: '';
  display: block;
  height: 13px;
}

@media (max-width: 540px) {
  .results-grid:not(.view-list) {
    --card-brand-h: 17px;
    --card-model-h: 14px;
    --card-specs-lh: 13px;
    --card-specs-h: 32px;
    --card-seller-h: 15px;
    /* Mismo cálculo con el precio de 13px del breakpoint. */
    --card-price-h: 44px;
  }
}

/* ≤420px: con la columna de ~150px o menos, los cinco datos de la línea de
   specs (año · transmisión · cilindrada · combustible · pasajeros) ya no
   caben en dos líneas y el overflow:hidden se comía la tercera, casi siempre
   "pasajeros". Se reservan tres líneas: 3 × 13px + 2 × 4px de gap = 47px.
   Sigue siendo un alto fijo, así que todas las cards miden lo mismo. */
@media (max-width: 420px) {
  .results-grid:not(.view-list) {
    --card-specs-h: 47px;
  }
}

/* Teléfonos (<500px): el home se rompía por tres lados.
   · Header (<500px): logo + etiqueta dev (194px) + Ingresar + Crear cuenta + ☰
     suman ~460px; por debajo el documento crecía a lo ancho (~476px) y toda la
     página se corría de lado. "Crear cuenta" se va del header —sigue en el
     menú (#btn-registrar-mobile)— y la etiqueta de prototipo queda con el
     bloque V8 y la fecha de la versión, sin el título ni la flecha.
   · Grilla (<420px): 32px de margen por lado dejaban columnas de ~136px; baja
     a 16px y las columnas usan minmax(0, 1fr) para que ninguna card las ensanche.
   · Calculadora (<420px): el botón "Solicite su financiamiento aquí →" es
     nowrap y, sumado al padding de 24px del panel, la obligaba a medir 322px
     dentro de una columna más angosta — se cortaba a la derecha. Se compacta
     entera: paddings, título y cifras más chicos y el botón puede partir línea. */
@media (max-width: 499px) {
  .header-actions .btn-registrar { display: none; }
  .dev-proto .dev-proto-tag-title,
  .dev-proto .dev-proto-toggle { display: none; }
  .dev-proto .dev-proto-tag-body { justify-content: center; }
  /* Con sesión iniciada el chip "Demo ▾" (114px) empujaba el ☰ 35px fuera del
     margen a 375. Queda solo el avatar + flecha; el dropdown ya va fijado al
     viewport en mobile, así que no se mueve. */
  .user-chip { gap: 4px; padding-right: 8px; }
  .user-chip > #user-chip-name { display: none; }
  /* Barra de "Editar publicación": volver + título + Guardar cambios no caben
     (el botón se salía 8px de la pantalla a 375). El título se va: "← Mis
     anuncios" y la nota "Así se ve su publicación" ya dan el contexto. */
  .ea-topbar-title { display: none; }
}
/* <370px: la fecha en una línea empuja el ☰ fuera de la pantalla; parte en
   dos ("26 de octubre" / "del 2026"). */
@media (max-width: 369px) {
  .dev-proto .dev-proto-tag-date { white-space: normal; max-width: 14ch; }
}
@media (max-width: 419px) {
  .home-results-inner { padding: 0 var(--s-4); }
  .results-grid:not(.view-list) { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .fin-module--calc { grid-template-columns: minmax(0, 1fr); padding: var(--s-4) var(--s-3); gap: var(--s-3); }
  .fin-module--calc .fin-c-title { font-size: 19px; }
  .fin-calc { gap: var(--s-3); }
  .fin-calc-panel--input,
  .fin-calc-panel--result { padding: var(--s-3); gap: var(--s-3); }
  .fin-calc .fin-input-wrap--lg,
  .fin-calc .fin-input-wrap--hero { min-height: 50px; padding: 8px 12px; }
  .fin-price-input--lg { font-size: 20px; }
  .fin-input-wrap--lg .fin-input-pfx { font-size: 16px; }
  .fin-price-input--hero { font-size: 26px; }
  .fin-input-pfx--hero { font-size: 19px; }
  .fin-calc-meta { gap: var(--s-2) var(--s-4); }
  .fin-calc-cta { white-space: normal; padding: var(--s-3) var(--s-4); }
}

/* <360px (iPhone SE de 1ª gen., Android chicos): en dos columnas la card mide
   ~100–115px y los datos de specs ya necesitan 4–5 líneas. Ahí la grilla pasa
   a UNA columna: la card vuelve a tener ancho para que los datos quepan en sus
   dos líneas de siempre (32px) y nada queda oculto. El carrusel de destacados
   del home, que no es grilla, muestra una card a la vez con un asomo de la
   siguiente. */
@media (max-width: 359px) {
  .results-grid:not(.view-list) {
    grid-template-columns: minmax(0, 1fr);
    --card-specs-h: 32px;
  }
  .destacados-track .card { flex: 0 0 calc(100vw - 72px); }
}

/* Los bordes de estado no deben engrosar la caja: el borde dorado de 2px de
   .is-featured y la barra azul de 3px de .is-registered hacían que esas cards
   midieran 1px distinto y que su contenido arrancara 2px más abajo que el de
   las demás. Se repintan sin tocar la geometría — el dorado como outline
   hacia adentro, la barra azul como pseudo-elemento — y el borde vuelve a
   1px, igual que en cualquier otra card. */
.results-grid:not(.view-list) .card.is-featured {
  border: 1px solid var(--line);
  outline: 2px solid #f59e0b;
  outline-offset: -2px;
}
.results-grid:not(.view-list) .card.is-featured:hover {
  border-color: var(--line-strong);
}
.results-grid:not(.view-list) .card.is-registered {
  border-top: 1px solid var(--line);
}
.results-grid:not(.view-list) .card.is-registered::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--finance);
  z-index: 4;
  pointer-events: none;
}


/* =============================================================================
   VENDEDOR REGISTRADO · RENOVACIÓN EN BLOQUES DE 5 Y ANUNCIOS SIN ESPACIO
   El plan solo se renueva de 5 en 5, así que cuando hay más anuncios
   publicados que espacios en la renovación, algunos quedan inactivos por falta
   de espacio de publicación. Esto le pone cara a esos dos estados.
   ========================================================================== */

/* ── Aviso de recorte dentro del panel de renovación ── */
.rp-warn--cut .rp-warn-text { margin-bottom: var(--s-3); }

.rp-cut-list {
  list-style: none;
  margin: 0 0 var(--s-3);
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  overflow: hidden;
  background: var(--paper-deep);
}
.rp-cut-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 9px var(--s-3);
  font-size: 12.5px;
  line-height: 1.4;
  border-top: 1px solid var(--line);
}
.rp-cut-row:first-child { border-top: 0; }
.rp-cut-n {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
}
.rp-cut-car {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  font-weight: 600;
}
.rp-cut-tag {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--r-pill);
}
.rp-cut-row.is-keep .rp-cut-n   { background: color-mix(in srgb, var(--verified) 20%, transparent); color: var(--verified); }
.rp-cut-row.is-keep .rp-cut-tag { background: color-mix(in srgb, var(--verified) 14%, transparent); color: var(--verified); }
.rp-cut-row.is-drop             { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.rp-cut-row.is-drop .rp-cut-n   { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); }
.rp-cut-row.is-drop .rp-cut-car { color: var(--ink-soft); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.rp-cut-row.is-drop .rp-cut-tag { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }

.rp-cut-hint {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.rp-cut-fix {
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-sans);
  font-size: inherit;
  font-weight: 700;
  color: var(--amber);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.rp-cut-fix:hover { color: var(--ink); }

/* ── Cabecera: la renovación solo se ofrece en los últimos días del ciclo ── */
.dr-next-plan.is-locked { color: var(--metal); }
.dr-next-plan.is-locked strong { color: var(--metal-soft); }
.dr-next-plan.is-alert { color: var(--accent); }
.dr-next-plan.is-alert svg { color: var(--accent); }
.dr-next-plan.is-alert strong { color: var(--accent); }

/* ── Tarjeta de anuncio inactivo por falta de espacio ──
   La foto se apaga para que se lea de un vistazo que no está publicado, y el
   motivo viaja en la cinta sobre la imagen y en la píldora de estado — ambas
   ocupan lugares que ya existían, así que la altura de la tarjeta no cambia. */
.dash-card--nospace { border: 1.5px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.dash-card--nospace .dash-card-img { filter: grayscale(0.75) brightness(0.62); }
.dash-card--nospace .dash-card-title { color: var(--ink-soft); }
.dash-card-badge.is-nospace { background: rgba(232, 97, 78, 0.92); color: #fff; }
.dash-card-nospace-flag {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: var(--r-pill);
  background: rgba(20, 22, 33, 0.88);
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  color: #F3B4AA;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
}
.dash-card-nospace-flag svg { width: 12px; height: 12px; flex-shrink: 0; color: var(--accent); }
.dash-expiry-pill.is-nospace {
  background: rgba(232, 97, 78, 0.14);
  color: #F08B7A;
  border: 1px solid rgba(232, 97, 78, 0.32);
  font-weight: 600;
}

@media (max-width: 560px) {
  .rp-cut-row { flex-wrap: wrap; gap: var(--s-2); }
  .rp-cut-tag { margin-left: 28px; }
}


/* ── Renovación pagada ──
   El cobro se hace hoy y la vigencia arranca cuando cierra el ciclo vigente.
   Una vez pagada, el panel deja de ser un selector y pasa a ser comprobante:
   verde en vez de ámbar, para que se lea "esto ya está" y no "esto falta". */
.rp-plan-badge--ok {
  color: var(--verified);
  background: color-mix(in srgb, var(--verified) 15%, transparent);
  border-color: color-mix(in srgb, var(--verified) 32%, transparent);
}
.rp-note.is-ok {
  background: color-mix(in srgb, var(--verified) 9%, var(--paper));
  border-color: color-mix(in srgb, var(--verified) 34%, transparent);
}
.rp-note.is-ok svg { color: var(--verified); }
.dr-next-plan.is-paid { color: var(--verified); }
.dr-next-plan.is-paid svg { color: var(--verified); }
.dr-next-plan.is-paid strong { color: var(--verified); }


/* =============================================================================
   FICHA · RESUMEN RÁPIDO EN MOBILE
   En pantallas chicas la tira horizontal de 6 atributos obligaba a apretar el
   texto hasta 7.5px (o a hacer scroll lateral, que nadie descubre). Debajo de
   620px deja de ser tira y pasa a ser listado: dos columnas de filas
   "ícono + etiqueta / valor", con el valor a tamaño legible. Las líneas entre
   celdas se hacen con `gap` sobre el fondo del contenedor —no con bordes por
   celda— para no depender de la posición de cada ítem en el markup (los
   .fqs-divider de la tira quedan fuera del grid con display:none).
   ========================================================================== */
@media (max-width: 620px) {
  .ficha-quickstats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--line-strong);
    overflow: hidden;
  }
  .fqs-divider { display: none; }

  .fqs-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 1px;
    align-items: center;
    justify-items: start;
    text-align: left;
    min-width: 0;
    padding: 10px var(--s-3);
    background: var(--paper);
  }

  .fqs-icon {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 28px;
    height: 28px;
    border-radius: var(--r-1);
  }
  .fqs-icon svg { width: 15px; height: 15px; }

  .fqs-label {
    grid-column: 2;
    grid-row: 1;
    font-size: 9px;
    letter-spacing: 0.5px;
    line-height: 1.2;
  }

  .fqs-val {
    grid-column: 2;
    grid-row: 2;
    font-size: 13.5px;
    line-height: 1.25;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Teléfonos angostos: una sola columna, que es donde el valor largo
   ("Automática", "San José") deja de caber al lado del ícono. */
@media (max-width: 380px) {
  .ficha-quickstats { grid-template-columns: minmax(0, 1fr); }
}

/* Mis anuncios · vendedor individual sin anuncios publicados (empty state). */
.dash-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-8) var(--s-5);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-3);
  background: var(--paper);
  text-align: center;
}
.dash-empty-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--s-2);
  border-radius: var(--r-pill);
  background: var(--paper-warm);
  color: var(--ink-soft);
}
.dash-empty-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.dash-empty-sub {
  max-width: 460px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.dash-empty .btn-dash-publish { margin-top: var(--s-3); }
@media (max-width: 640px) {
  .dash-empty { padding: var(--s-7) var(--s-4); }
}

/* Aviso bajo el total del carrito de mejoras (solo vendedor registrado con
   saldo): lo pagado con wallet no lleva IVA. Ver renderUpgradeCartSummary. */
.upgrade-cart-wallet-note {
  margin-top: var(--s-1);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-soft);
}