/* =========================================================================
   TRADING TRUCKS & MACHINERY — sistema de diseño premium/industrial
   Paleta: negro con mucha presencia, blanco/gris, rojo como acento estratégico
   ========================================================================= */
:root {
  --black: #0a0a0a;
  --black-soft: #101012;
  --charcoal: #17171a;
  --charcoal-2: #202024;
  --charcoal-3: #2b2b30;
  --line-on-dark: #313136;
  --red: #c81e2c;
  --red-bright: #e42536;
  --red-dark: #8f151f;
  --white: #ffffff;
  --off-white: #f5f4f2;
  --gray-100: #f2f1ef;
  --gray-200: #e5e4e1;
  --gray-300: #d1d0cc;
  --gray-500: #8a8985;
  --gray-600: #67665f;
  --gray-700: #4a4944;
  --gray-900: #1c1b19;

  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --shadow-soft: 0 8px 30px rgba(10, 10, 10, 0.08);
  --shadow-hard: 0 20px 60px rgba(10, 10, 10, 0.35);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --max-width: 1280px;

  font-size: 16px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--gray-900);
  background: var(--white);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

/* Paso 10.9 -- accesibilidad: foco de teclado siempre visible con buen
   contraste sobre fondo claro u oscuro, sin depender de que cada componente
   lo defina por separado. Solo se muestra con navegación por teclado
   (:focus-visible), nunca al hacer clic con el ratón, para no añadir ruido
   visual en la interacción normal. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 2px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Campo honeypot del formulario de contacto (ver Contact.tsx): oculto solo
   por posicionamiento fuera de pantalla, no con display:none ni el atributo
   hidden -- deliberado, para que siga "pareciendo" un campo real de
   formulario a un bot simple que ignore esas dos señales habituales. */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--red);
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--red); display: inline-block; }
.eyebrow.on-dark { color: var(--red-bright); }

h1, h2, h3, h4 { font-weight: 800; letter-spacing: -0.01em; margin: 0; }

/* =========================================================================
   Scroll reveal / microinteracciones (JS añade .in-view via IntersectionObserver)
   ========================================================================= */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: var(--reveal-delay, 0s);
}
[data-reveal].in-view { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* =========================================================================
   Header
   ========================================================================= */
.site-header {
  background: rgba(10, 10, 10, 0.92);
  backdrop-filter: blur(10px);
  color: var(--white);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--line-on-dark);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  gap: 20px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--white);
  font-weight: 700;
  flex-shrink: 0;
}
.brand-mark {
  background: var(--red);
  color: var(--white);
  font-weight: 800;
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 4px;
  letter-spacing: 1px;
}
.brand-text {
  font-size: 13px;
  line-height: 1.25;
  letter-spacing: 0.5px;
  font-weight: 800;
}
.main-nav { display: flex; align-items: center; gap: 28px; }
.main-nav a {
  color: var(--gray-300);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.3px;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
  white-space: nowrap;
}
.main-nav a:hover, .main-nav a.active { color: var(--white); border-bottom-color: var(--red); }
.nav-extra { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
/* Un unico boton "Ver stock" en toda la cabecera, aqui en .nav-extra, visible
   siempre (escritorio y movil, con el menu principal abierto o cerrado) --
   antes .main-nav tambien traia su propia copia y en escritorio se veian
   los dos juntos ("Stock" de la lista + "Ver stock" al lado, y otro "Ver
   stock" mas), ruido visual y duplicado que el cliente senalo
   explicitamente. Un solo boton, un solo sitio. */
.nav-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(37, 211, 102, 0.12);
  color: #25d366;
  border: 1px solid rgba(37, 211, 102, 0.35);
  transition: transform 0.2s var(--ease), background 0.2s var(--ease);
}
.nav-whatsapp:hover { transform: translateY(-2px); background: rgba(37, 211, 102, 0.22); }
.nav-cta {
  background: var(--red);
  color: var(--white);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.5px;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.nav-cta:hover { background: var(--red-bright); transform: translateY(-1px); }
.nav-admin {
  border: 1px solid var(--line-on-dark);
  border-radius: var(--radius-sm);
  padding: 9px 16px;
  color: var(--gray-300) !important;
  font-size: 12px !important;
}
.nav-admin:hover { border-color: var(--red); color: var(--white) !important; }
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  width: 40px;
  height: 40px;
}
.nav-toggle span { width: 24px; height: 2px; background: var(--white); transition: transform 0.25s var(--ease), opacity 0.25s var(--ease); }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =========================================================================
   Botones
   ========================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.5px;
  cursor: pointer;
  border: 2px solid transparent;
  text-align: center;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.btn-primary { background: var(--red); color: var(--white); }
.btn-primary:hover { background: var(--red-bright); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(200, 30, 44, 0.3); }
.btn-outline { background: transparent; border-color: rgba(255, 255, 255, 0.5); color: var(--white); }
.btn-outline:hover { background: var(--white); color: var(--black); border-color: var(--white); transform: translateY(-2px); }
.btn-outline-dark { background: transparent; border-color: var(--gray-900); color: var(--gray-900); }
.btn-outline-dark:hover { background: var(--gray-900); color: var(--white); transform: translateY(-2px); }
.btn-ghost { background: transparent; border-color: var(--gray-300); color: var(--gray-900); }
.btn-ghost:hover { border-color: var(--gray-900); }
.btn-whatsapp { background: #1fb955; color: var(--white); }
.btn-whatsapp:hover { background: #1ba64c; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(31, 185, 85, 0.3); }
.btn-block { display: flex; width: 100%; margin-top: 10px; }
.btn-lg { padding: 17px 34px; font-size: 14px; }
.btn-sm { padding: 9px 16px; font-size: 12px; }

/* =========================================================================
   Secciones genéricas
   ========================================================================= */
.section { padding: 88px 0; }
.section-tight { padding: 56px 0; }
.section-title { font-size: clamp(28px, 3.4vw, 42px); margin: 10px 0 16px; letter-spacing: -0.01em; }
.section-lead { color: var(--gray-600); font-size: 17px; max-width: 640px; margin: 0 0 40px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 8px; }
.section-cta { text-align: center; margin-top: 44px; }
.page-title { font-size: clamp(28px, 4vw, 40px); margin-bottom: 8px; }
.section-dark { background: var(--black); color: var(--white); }
.section-dark .section-lead { color: var(--gray-300); }
.section-offwhite { background: var(--off-white); }

/* =========================================================================
   HERO — Home
   ========================================================================= */
.hero {
  position: relative;
  background: var(--black);
  color: var(--white);
  overflow: hidden;
  padding: 0;
  min-height: 88vh;
  display: flex;
  align-items: center;
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-media svg, .hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(6, 6, 7, 0.55) 0%, rgba(6, 6, 7, 0.75) 55%, rgba(6, 6, 7, 0.96) 100%),
    linear-gradient(90deg, rgba(6, 6, 7, 0.92) 0%, rgba(6, 6, 7, 0.35) 55%, rgba(6, 6, 7, 0.75) 100%);
}
.hero-content {
  position: relative;
  z-index: 1;
  padding: 160px 0 120px;
  max-width: 760px;
}
.hero-title {
  font-size: clamp(46px, 7.2vw, 92px);
  line-height: 0.98;
  margin: 18px 0 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.hero-title span { color: var(--red-bright); display: block; }
.hero-subtitle {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 4px;
  color: var(--gray-300);
  text-transform: uppercase;
  margin: 0 0 6px;
}
.hero-lead { font-size: 19px; color: var(--gray-300); margin: 0 0 36px; max-width: 540px; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-scroll-cue {
  position: absolute;
  bottom: 34px;
  left: 24px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--gray-500);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.hero-scroll-cue .line { width: 1px; height: 34px; background: linear-gradient(var(--red-bright), transparent); animation: scrollcue 1.8s ease-in-out infinite; }
@keyframes scrollcue { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }

/* =========================================================================
   Bento Grid Stats
   ========================================================================= */
.stats-bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.stat-tile {
  background: var(--charcoal);
  border: 1px solid var(--line-on-dark);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.stat-tile:hover { transform: translateY(-4px); border-color: var(--red); }
.stat-tile.span-2 { grid-column: span 2; }
.stat-value {
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 800;
  color: var(--white);
  line-height: 1;
  letter-spacing: -0.02em;
}
.stat-value .accent { color: var(--red-bright); }
.stat-label {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gray-300);
}
.stat-placeholder-note {
  margin-top: 14px;
  font-size: 11px;
  color: var(--gray-600);
  letter-spacing: 0.3px;
}

/* =========================================================================
   Categorías
   ========================================================================= */
.category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.category-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--charcoal);
  display: block;
}
.category-card-media { position: absolute; inset: 0; }
.category-card-media svg, .category-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.category-card:hover .category-card-media svg, .category-card:hover .category-card-media img { transform: scale(1.08); }
.category-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0) 30%, rgba(10, 10, 10, 0.92) 100%);
}
.category-card-label {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 20px;
  z-index: 1;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.category-card-label h3 { font-size: 18px; letter-spacing: 0.3px; text-transform: uppercase; }
.category-card-arrow {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease), border-color 0.25s var(--ease);
  flex-shrink: 0;
}
.category-card:hover .category-card-arrow { background: var(--red); border-color: var(--red); transform: translateX(3px); }

/* =========================================================================
   Vehicle grid / cards (usado en Home destacados y en Stock)
   ========================================================================= */
.vehicle-grid {
  display: grid;
  /* Paso 10.8 -- bug real de móvil encontrado en la regresión: minmax(320px, 1fr)
     a secas fuerza cada columna a un mínimo de 320px SIEMPRE, así que en un
     móvil con menos de 320px de ancho útil (habitual: pantallas de 320-360px
     con el padding del .container ya descontado) la tarjeta no cabía y
     provocaba scroll horizontal en toda la página. min(320px, 100%) hace que
     el mínimo nunca supere el ancho disponible real. */
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 28px;
}
.vehicle-card {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--white);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
  display: flex;
  flex-direction: column;
}
.vehicle-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hard); border-color: var(--gray-900); }
.vehicle-card-img { position: relative; aspect-ratio: 4 / 3; background: var(--charcoal); overflow: hidden; }
.vehicle-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.vehicle-card:hover .vehicle-card-img img { transform: scale(1.06); }
.vehicle-card-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.vehicle-card-category { font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--red); }
.vehicle-card-body h3 { margin: 0; font-size: 19px; letter-spacing: -0.01em; }
.vehicle-card-meta { color: var(--gray-600); font-size: 13px; margin: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.vehicle-card-footer { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--gray-200); }
.vehicle-card-price { font-size: 20px; font-weight: 800; color: var(--gray-900); margin: 0; }
.vehicle-card-link { font-size: 12px; font-weight: 700; letter-spacing: 0.5px; color: var(--red); display: inline-flex; align-items: center; gap: 6px; }
.vehicle-card:hover .vehicle-card-link { text-decoration: underline; }

.badge {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 6px 12px;
  font-size: 10px;
  font-weight: 800;
  border-radius: var(--radius-sm);
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 1px;
  z-index: 1;
}
.badge-disponible { background: #1e9e4a; }
.badge-reservado { background: #c88a00; }
.badge-vendido { background: #4a4944; }

/* Paso 10.7 -- ficha de stock premium: contador de fotos reales y aviso de
   vídeo disponible, siempre datos reales (nunca decorativos/inventados). */
.vehicle-card-photo-count {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(10, 10, 10, 0.62);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  padding: 5px 9px;
  border-radius: 999px;
}
.vehicle-card-video-badge {
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: 1;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(10, 10, 10, 0.62);
  color: var(--white);
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =========================================================================
   About / Sobre nosotros
   ========================================================================= */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.about-points { display: grid; gap: 18px; margin-top: 28px; }
.about-point { display: flex; gap: 14px; align-items: flex-start; }
.about-point-icon {
  width: 40px; height: 40px; border-radius: 50%; background: var(--gray-900); color: var(--white);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight: 800;
}
.about-point h4 { font-size: 15px; margin-bottom: 4px; }
.about-point p { margin: 0; color: var(--gray-600); font-size: 14px; }
.about-visual {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--charcoal);
}
.placeholder-note {
  display: inline-block;
  margin-top: 18px;
  font-size: 12px;
  color: var(--gray-500);
  border: 1px dashed var(--gray-300);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
}

/* =========================================================================
   Rocket CTA
   ========================================================================= */
.rocket-cta {
  position: relative;
  background: var(--gray-900);
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: 90px 40px;
  text-align: center;
  color: var(--white);
}
.rocket-cta::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at 30% 20%, rgba(200, 30, 44, 0.35), transparent 55%),
    radial-gradient(circle at 80% 80%, rgba(200, 30, 44, 0.2), transparent 50%);
  animation: rocketglow 10s ease-in-out infinite alternate;
}
@keyframes rocketglow { from { transform: translate(-2%, -2%) scale(1); } to { transform: translate(2%, 2%) scale(1.08); } }
.rocket-cta-inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.rocket-cta h2 { font-size: clamp(30px, 4.4vw, 50px); letter-spacing: -0.01em; margin-bottom: 18px; text-transform: uppercase; }
.rocket-cta p { font-size: 17px; color: var(--gray-300); margin: 0 0 36px; }
.rocket-cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* =========================================================================
   Filtros / Stock
   ========================================================================= */
.stock-hero {
  background: var(--black);
  color: var(--white);
  padding: 64px 0 48px;
}
.stock-hero .eyebrow { margin-bottom: 14px; }
.stock-hero h1 { font-size: clamp(32px, 4.5vw, 48px); text-transform: uppercase; letter-spacing: -0.01em; }
.stock-hero p { color: var(--gray-300); max-width: 560px; margin-top: 14px; font-size: 15px; }

.filters-panel {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: var(--shadow-soft);
  margin-top: -56px;
  position: relative;
  z-index: 2;
  margin-bottom: 40px;
}
.filters {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  align-items: center;
}
.filters input, .filters select {
  padding: 12px 14px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  font-size: 16px; /* evita el zoom automatico de iOS Safari al enfocar */
  width: 100%;
  min-width: 0;
  background: var(--white);
}
.filters input:focus, .filters select:focus, textarea:focus { outline: none; border-color: var(--gray-900); }
.filters .btn { white-space: nowrap; }

.results-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 24px;
}
.results-count { color: var(--gray-600); font-size: 14px; }
.sort-select {
  padding: 10px 14px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  font-size: 16px; /* evita el zoom automatico de iOS Safari al enfocar */
  background: var(--white);
}
.empty-state { color: var(--gray-600); padding: 60px 0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.empty-state-page { text-align: center; padding: 120px 0; }
.empty-state-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
@media (max-width: 480px) {
  .empty-state-page { padding: 80px 20px; }
  .empty-state-actions { flex-direction: column; align-items: stretch; }
}

.stock-pagination { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 36px; }
.stock-pagination-status { font-size: 13px; font-weight: 700; color: var(--gray-600); }
.stock-pagination .is-disabled { opacity: 0.4; pointer-events: none; }

/* =========================================================================
   Vehicle detail — galería + specs
   ========================================================================= */
.breadcrumb { color: var(--gray-600); font-size: 13px; margin: 24px 0 20px; }
.breadcrumb a:hover { color: var(--gray-900); text-decoration: underline; }
.vehicle-detail-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 48px;
  align-items: start;
}
/* Paso 10.8 -- mismo bug de grid que en .stock-layout: sin min-width: 0, la
   columna de galería no se encogía por debajo de su contenido en móvil y
   provocaba scroll horizontal en toda la ficha de vehículo. */
.vehicle-detail-grid > * { min-width: 0; }
.vehicle-gallery { position: sticky; top: 90px; }

/* ---------- Fase 6: pestañas Fotos / 360 / 3D / Documentacion ---------- */
.media-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.media-tab {
  background: transparent;
  border: 1px solid var(--gray-200);
  color: var(--gray-600);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 9px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.media-tab:hover { border-color: var(--black); color: var(--black); }
.media-tab.active { background: var(--black); border-color: var(--black); color: var(--white); }
.media-empty-state {
  aspect-ratio: 4 / 3;
  background: var(--charcoal);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--gray-500);
  text-align: center;
  padding: 30px;
}
.media-empty-state p { margin: 0; font-size: 12.5px; font-weight: 600; letter-spacing: 0.2px; max-width: 320px; }

.viewer-360 {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--charcoal);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}
.viewer-360.dragging { cursor: grabbing; }
.viewer-360-img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.viewer-360-hint {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(10, 10, 10, 0.65);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
}

.viewer-3d-wrap {
  position: relative;
  aspect-ratio: 4 / 3;
  background: radial-gradient(circle at 50% 30%, #1a1a1e 0%, #050505 100%);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.viewer-3d-el { width: 100%; height: 100%; --poster-color: transparent; }
.viewer-3d-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-400);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.viewer-3d-hint {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(10, 10, 10, 0.55);
  color: var(--gray-300);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  pointer-events: none;
}

/* Paso 9.8 -- indicador de carga real (con spinner + porcentaje real de
   descarga del GLB/glTF, no un temporizador fijo), y controles del visor
   (reset de camara / pantalla completa). */
.viewer-3d-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--gray-600);
  border-top-color: var(--gray-200);
  border-radius: 50%;
  animation: viewer-3d-spin 0.8s linear infinite;
  vertical-align: middle;
}
@keyframes viewer-3d-spin { to { transform: rotate(360deg); } }
.viewer-3d-controls {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 8px;
  z-index: 2;
}
.viewer-3d-btn {
  background: rgba(10, 10, 10, 0.6);
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 7px 10px;
  cursor: pointer;
}
.viewer-3d-btn:hover { background: rgba(10, 10, 10, 0.85); }
@media (max-width: 480px) {
  .viewer-3d-controls { top: 8px; right: 8px; gap: 6px; }
  .viewer-3d-btn { padding: 8px 10px; font-size: 10px; }
}

/* Paso 8.4 -- documentacion publica real en la ficha de vehiculo (antes era
   siempre un aviso fijo de "proximamente", sin importar los documentos
   marcados como publicos desde administracion). */
.public-doc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.public-doc-list a {
  display: block;
  padding: 14px 16px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-weight: 600;
  color: var(--gray-900);
}
.public-doc-list a:hover { border-color: var(--red); color: var(--red); }

/* Paso 10.3 -- panel público de vídeos: el primero (principal) se muestra
   más grande; el resto en una franja debajo. Sin autoplay nunca (ver
   VehicleDetail.tsx: preload="none" salvo el primero). */
.video-panel-list { display: flex; flex-direction: column; gap: 16px; }
.video-panel-item:first-child .video-panel-el { aspect-ratio: 16 / 9; }
.video-panel-el { width: 100%; max-height: 70vh; background: var(--black); border-radius: var(--radius-lg); display: block; }
.video-panel-title { margin: 8px 0 0; font-size: 13px; font-weight: 700; color: var(--gray-700); }

.gallery-main {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--charcoal);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: zoom-in;
}
.gallery-main img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.25s var(--ease); }
.gallery-zoom-hint {
  position: absolute;
  bottom: 14px;
  right: 14px;
  background: rgba(10, 10, 10, 0.65);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  z-index: 1;
  text-transform: uppercase;
}
.gallery-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(10, 10, 10, 0.55);
  color: var(--white);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1;
  transition: background 0.2s var(--ease);
}
.gallery-nav-btn:hover { background: var(--red); }
.gallery-nav-btn.prev { left: 14px; }
.gallery-nav-btn.next { right: 14px; }

/* Paso 10.2 -- contador de fotos + botón de pantalla completa + skeleton de
   carga (evita ver un hueco en blanco o la imagen "saltando" mientras carga
   la siguiente foto -- el contenedor ya tiene su tamaño fijo por
   aspect-ratio, así que nunca hay salto de layout, solo un breve shimmer). */
.gallery-counter {
  position: absolute;
  bottom: 14px;
  left: 14px;
  background: rgba(10, 10, 10, 0.65);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 6px 11px;
  border-radius: 999px;
  z-index: 1;
}
.gallery-fullscreen-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 1;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(10, 10, 10, 0.55);
  color: var(--white);
  font-size: 15px;
  cursor: pointer;
  transition: background 0.2s var(--ease);
}
.gallery-fullscreen-btn:hover { background: var(--red); }
.gallery-skeleton {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(100deg, var(--charcoal) 30%, var(--charcoal-2) 45%, var(--charcoal) 60%);
  background-size: 250% 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s var(--ease);
}
.gallery-skeleton.visible { opacity: 1; animation: gallery-skeleton-shimmer 1.3s ease-in-out infinite; }
@keyframes gallery-skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -50% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-skeleton.visible { animation: none; }
}
.gallery-thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.gallery-thumb {
  width: 88px;
  height: 66px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 2px solid transparent;
  opacity: 0.6;
  transition: opacity 0.2s var(--ease), border-color 0.2s var(--ease);
}
.gallery-thumb:hover, .gallery-thumb.active { opacity: 1; border-color: var(--red); }

.vehicle-info-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.vehicle-info h1 { margin: 0 0 6px; font-size: clamp(24px, 2.8vw, 32px); }
.vehicle-info-head-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vehicle-info-category { font-size: 12px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--red); margin-bottom: 8px; }
.vehicle-price { font-size: clamp(26px, 3vw, 34px); font-weight: 800; color: var(--gray-900); margin: 0 0 22px; }
.vehicle-cta-row { display: grid; gap: 10px; margin-bottom: 28px; }

.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--gray-300);
  color: var(--gray-600);
  font-size: 12px;
  font-weight: 700;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  margin-bottom: 8px;
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease);
  min-height: 32px;
}
.share-btn:hover { border-color: var(--gray-900); color: var(--gray-900); }
.share-btn.copied { border-color: var(--red); color: var(--red); }

.specs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--gray-200); border: 1px solid var(--gray-200); border-radius: var(--radius-md); overflow: hidden; }
.spec-tile { background: var(--white); padding: 16px 18px; }
.spec-label { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--gray-500); margin-bottom: 4px; }
.spec-value { font-size: 15px; font-weight: 700; color: var(--gray-900); }

.equipment-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 20px; list-style: none; padding: 0; margin: 0; }
.equipment-list li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--gray-700); }
.equipment-list li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--red); flex-shrink: 0; }

.vehicle-description { margin-top: 48px; max-width: 820px; }
.vehicle-description h2, .equipment-section h2, .similar-section h2 { font-size: 22px; margin-bottom: 16px; }
.vehicle-description p { color: var(--gray-700); white-space: pre-line; }
.equipment-section { margin-top: 48px; }
.similar-section { margin-top: 72px; padding-top: 48px; border-top: 1px solid var(--gray-200); }

/* Lightbox */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 6, 7, 0.96);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.lightbox-overlay.open { display: flex; }
.lightbox-overlay img {
  max-width: 100%;
  max-height: 86vh;
  margin: 0 auto;
  border-radius: var(--radius-sm);
  cursor: zoom-in;
  transition: transform 0.25s var(--ease);
  touch-action: pan-y;
}
/* Paso 10.2 -- zoom por doble clic/doble toque dentro del lightbox. */
.lightbox-overlay img.zoomed { transform: scale(2.2); cursor: zoom-out; touch-action: none; }
@media (prefers-reduced-motion: reduce) {
  .lightbox-overlay img { transition: none; }
}
.lightbox-close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-on-dark);
  background: transparent;
  color: var(--white);
  font-size: 20px;
  cursor: pointer;
}
.lightbox-overlay .gallery-nav-btn { background: rgba(255, 255, 255, 0.12); }

/* =========================================================================
   Contacto
   ========================================================================= */
.contact-hero { background: var(--black); color: var(--white); padding: 64px 0 90px; }
.contact-hero h1 { font-size: clamp(32px, 4.5vw, 48px); text-transform: uppercase; }
.contact-hero p { color: var(--gray-300); max-width: 560px; margin-top: 14px; }
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 40px;
  margin-top: -56px;
  position: relative;
  z-index: 2;
  align-items: start;
}
.contact-info-card {
  background: var(--gray-900);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.contact-info-row { display: flex; gap: 14px; align-items: flex-start; }
.contact-info-icon {
  width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--red-bright);
}
.contact-info-row h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--gray-500); margin-bottom: 4px; }
.contact-info-row p, .contact-info-row a { font-size: 15px; color: var(--white); margin: 0; }
.contact-hours { border-top: 1px solid var(--line-on-dark); padding-top: 20px; margin-top: 4px; }
.contact-hours h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--gray-500); margin-bottom: 10px; }
.contact-hours p { font-size: 13px; color: var(--gray-300); margin: 3px 0; }
.contact-social { display: flex; gap: 10px; margin-top: 4px; }
.contact-social a {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-on-dark);
  display: flex; align-items: center; justify-content: center; color: var(--gray-300);
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.contact-social a:hover { border-color: var(--red); color: var(--white); }

.contact-form-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  box-shadow: var(--shadow-soft);
}
.contact-form { display: grid; gap: 18px; }
.contact-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.contact-form label { font-size: 12px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--gray-600); }
.vehicle-context-chip {
  display: inline-flex; align-items: center; gap: 8px; background: var(--off-white);
  border: 1px solid var(--gray-200); border-radius: var(--radius-sm); padding: 10px 14px; font-size: 13px; color: var(--gray-700);
}

/* =========================================================================
   Footer
   ========================================================================= */
.site-footer { background: var(--black); color: var(--gray-300); }
.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding: 64px 0 36px;
}
.footer-brand { color: var(--white); font-weight: 800; margin-bottom: 14px; font-size: 15px; letter-spacing: 0.5px; }
.footer-desc { font-size: 14px; color: var(--gray-500); max-width: 260px; }
.site-footer h4 { color: var(--white); margin: 0 0 16px; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }
.footer-links { display: grid; gap: 10px; }
.site-footer a { font-size: 14px; }
.site-footer .footer-links a:hover, .footer-legal a:hover { color: var(--white); }
.footer-social { display: flex; gap: 10px; margin-top: 18px; }
.footer-social a {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-on-dark);
  display: flex; align-items: center; justify-content: center; color: var(--gray-300);
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.footer-social a:hover { border-color: var(--red); color: var(--white); }
.footer-bottom {
  border-top: 1px solid var(--line-on-dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 20px 0;
  font-size: 12px;
  color: var(--gray-500);
}
.footer-legal { display: flex; gap: 18px; flex-wrap: wrap; }

/* =========================================================================
   WhatsApp float
   ========================================================================= */
.whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #1fb955;
  color: var(--white);
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
  z-index: 90;
  transition: transform 0.25s var(--ease);
  animation: pulse-wa 2.4s ease-in-out infinite;
}
.whatsapp-float:hover { transform: scale(1.08); }
@keyframes pulse-wa {
  0%, 100% { box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35), 0 0 0 0 rgba(31, 185, 85, 0.4); }
  50% { box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35), 0 0 0 10px rgba(31, 185, 85, 0); }
}

/* =========================================================================
   Formularios (shared)
   ========================================================================= */
label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--gray-700); }
input, select, textarea {
  font-family: inherit;
  padding: 10px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  /* iOS Safari hace zoom automatico al enfocar un campo con font-size <16px --
     16px es el minimo real que lo evita, verificado (ver seccion 5 del prompt
     final: preparacion iPhone/Safari). Aplica a todos los campos de texto del
     sitio (filtros, contacto, login y formularios de admin). */
  font-size: 16px;
  color: var(--black);
}
.checkbox-label { flex-direction: row; align-items: center; }
.checkbox-label input { width: auto; }
.form-error { background: #fdecea; color: #b3261e; padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 16px; }
.form-success { background: #e6f4ea; color: #1e7b34; padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 16px; }

/* =========================================================================
   Admin (sin cambios funcionales; mismos nombres de clase que usa el panel)
   ========================================================================= */
.admin-body { background: var(--gray-100); min-height: 100vh; }
#offline-banner {
  display: none;
  position: sticky;
  top: 0;
  z-index: 500;
  background: #b3261e;
  color: #fff;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 16px;
}
#offline-banner.visible { display: block; }
.draft-restore-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  background: #fdf7ec;
  border: 1px solid #f3d9a6;
  color: #8a5a00;
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 13px;
  margin-bottom: 18px;
}
.draft-status { font-size: 11.5px; color: var(--gray-500); margin: -8px 0 14px; min-height: 14px; }
.admin-header { background: var(--black); color: var(--white); border-bottom: 3px solid var(--red); }
.admin-header-inner { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; flex-wrap: wrap; gap: 10px; }
.brand-admin { font-weight: 800; font-size: 16px; letter-spacing: 1px; }
.admin-nav { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.admin-nav a { color: var(--gray-300); font-size: 14px; font-weight: 600; position: relative; }
.admin-nav a:hover { color: var(--white); }
.admin-nav .unread-dot { background: var(--red); color: var(--white); font-size: 10px; font-weight: 800; border-radius: 20px; padding: 1px 6px; margin-left: 6px; }
.admin-nav-toggle { display: none; }

/* Paso 8.2 -- en movil, la cabecera admin pasa de una fila de enlaces que se
   envolvia (ocupando una franja alta antes del contenido) a un menu
   desplegable tras un boton hamburguesa, igual que en la web publica. */
@media (max-width: 700px) {
  .admin-nav-toggle { display: flex; }
  .admin-header-inner { padding: 12px 20px; position: relative; }
  .admin-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--black);
    flex-direction: column;
    align-items: flex-start;
    padding: 18px 20px 22px;
    gap: 16px;
    border-bottom: 3px solid var(--red);
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    z-index: 20;
  }
  .admin-nav.open { display: flex; }
  .admin-nav a { font-size: 16px; }
  .admin-header { position: sticky; top: 0; z-index: 30; }
}
.admin-main { padding: 30px 20px 60px; }
.admin-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }

.link-button {
  background: none;
  border: none;
  color: var(--red);
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  font-size: 14px;
}
.link-button.danger { color: #b3261e; }
.inline-form { display: inline; }

.admin-table-wrap { overflow-x: auto; background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); }
.admin-table { width: 100%; border-collapse: collapse; min-width: 760px; }
.admin-table th, .admin-table td { padding: 12px 14px; border-bottom: 1px solid #eee; font-size: 14px; text-align: left; vertical-align: middle; }
.admin-thumb { width: 64px; height: 48px; object-fit: cover; border-radius: 4px; }
.admin-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Paso 8.2 -- responsive real de tablas admin: en movil, una tabla ancha con
   scroll horizontal es dificil de usar con el dedo. Las tablas marcadas con
   ".cards-on-mobile" pasan a una lista de tarjetas (una por fila) por debajo
   de 700px, usando el atributo data-label de cada <td> como etiqueta -- sin
   duplicar markup ni logica en dos sitios. El scroll horizontal se sigue
   permitiendo en tablet/desktop cuando hace falta, nunca se fuerza en movil. */
@media (max-width: 700px) {
  .admin-table-wrap.cards-on-mobile { overflow-x: visible; background: transparent; box-shadow: none; border-radius: 0; }
  /* display:block en la propia tabla (no solo en thead/tbody/tr) es
     necesario: si se deja "table" en el elemento <table> mientras sus hijos
     dejan de ser table-row/table-cell, el navegador genera cajas anonimas
     para reparar el modelo de tabla y el ancho intrinseco vuelve a
     calcularse como si fuera una tabla normal (aqui se vio como un
     desbordamiento horizontal real en /admin/auditoria: 447px de tabla
     dentro de un viewport de 390px, con celdas de texto corto). */
  .cards-on-mobile .admin-table { display: block; min-width: 0; width: 100%; }
  .cards-on-mobile .admin-table thead { display: none; }
  .cards-on-mobile .admin-table tbody { display: block; }
  .cards-on-mobile .admin-table tr {
    display: block;
    background: var(--white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    margin-bottom: 14px;
    padding: 6px 14px;
  }
  .cards-on-mobile .admin-table tr.empty-state-row { box-shadow: none; background: transparent; padding: 0; }
  .cards-on-mobile .admin-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    text-align: right;
    border-bottom: 1px solid #f0f0f0;
    padding: 11px 0;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .cards-on-mobile .admin-table td:last-child { border-bottom: none; }
  .cards-on-mobile .admin-table td[data-label]::before {
    content: attr(data-label);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--gray-600);
    text-align: left;
    margin-right: auto;
    flex-shrink: 0;
  }
  .cards-on-mobile .admin-table td:not([data-label]) { justify-content: flex-start; text-align: left; }
  .cards-on-mobile .admin-table td.admin-actions { justify-content: flex-start; flex-wrap: wrap; padding-top: 14px; }
  .cards-on-mobile .admin-table td.admin-actions::before { display: none; }
  .cards-on-mobile .admin-table td.admin-table-cell-full { display: block; text-align: left; }
  .cards-on-mobile .admin-table td.admin-table-cell-full::before { display: block; margin-bottom: 6px; }
  .cards-on-mobile .admin-table .admin-thumb-cell { padding-top: 14px; justify-content: flex-start; }
  .cards-on-mobile .admin-table .admin-thumb-cell::before { display: none; }
  .cards-on-mobile .admin-thumb { width: 100%; height: 120px; }
}
.status-select { padding: 6px 8px; font-size: 16px; border-radius: 4px; font-weight: 700; color: var(--white); border: none; }
.status-select.status-disponible { background: #1e9e4a; }
.status-select.status-reservado { background: #c88a00; }
.status-select.status-vendido { background: #6a6a6a; }

.admin-form { background: var(--white); padding: 24px; border-radius: var(--radius-md); box-shadow: var(--shadow-soft); margin-bottom: 30px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-bottom: 16px; }
.full-width { width: 100%; margin-bottom: 20px; }
.form-actions { display: flex; gap: 12px; }

.photo-manager { background: var(--white); padding: 24px; border-radius: var(--radius-md); box-shadow: var(--shadow-soft); }
.photo-item-move { display: flex; gap: 6px; }
.photo-item-move button { background: var(--gray-100); border: 1px solid #ddd; border-radius: 4px; width: 26px; height: 26px; cursor: pointer; font-size: 12px; line-height: 1; }
.photo-item-move button:disabled { opacity: 0.35; cursor: default; }
.admin-card { background: var(--white); padding: 24px; border-radius: var(--radius-md); box-shadow: var(--shadow-soft); }

/* ---------- Fase 6: Sincronizacion de stock ---------- */
.sync-source-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 20px; }
.sync-source-card h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.4px; }
.sync-source-disabled { opacity: 0.92; background: var(--gray-50); }
.sync-not-configured-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--red);
  background: rgba(200, 30, 44, 0.08);
  padding: 4px 10px;
  border-radius: 20px;
  margin: 0 0 10px;
}
.sync-needed-list { margin: 8px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--gray-600); display: flex; flex-direction: column; gap: 4px; }
.sync-badge {
  display: inline-block;
  padding: 5px 11px;
  font-size: 10px;
  font-weight: 800;
  border-radius: var(--radius-sm);
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  white-space: nowrap;
}
.sync-badge-nuevo { background: #1e9e4a; }
.sync-badge-actualizacion { background: #2565c8; }
.sync-badge-duplicado { background: #c88a00; }
.sync-badge-error { background: var(--red); }
.doc-visibility {
  display: inline-block;
  padding: 3px 10px;
  font-size: 10px;
  font-weight: 800;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.doc-visibility-privado { background: var(--gray-100); color: var(--gray-700); }
.doc-visibility-publico { background: #1e9e4a; color: var(--white); }
.upload-form { display: flex; gap: 12px; align-items: center; margin-bottom: 20px; flex-wrap: wrap; }
/* Ejecucion final -- bug real de overflow encontrado en /admin/sync a 600px:
   un <input type="file"> nativo tiene un ancho intrinseco propio del
   navegador (~280-300px en Chromium) que NO se encoge dentro de un
   contenedor flex/grid mas estrecho salvo que se limite explicitamente --
   mismo tipo de bug que min-width:0 en grid, pero aqui aplica a un control
   nativo, no a un elemento normal. Regla global (no solo en un breakpoint
   concreto) porque el problema puede darse en cualquier ancho donde el
   contenedor del input sea mas estrecho que su ancho nativo. */
input[type="file"] { max-width: 100%; }
.sync-source-grid > * { min-width: 0; }
.photo-intelligence { margin-bottom: 20px; font-size: 12.5px; color: var(--gray-600); }
.photo-intelligence summary { cursor: pointer; font-weight: 700; color: var(--gray-900); }
.pi-issues { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pi-issue-aviso { color: #8a5a00; }
.pi-issue-error { color: var(--red); }
.pi-issue-ok { color: #1f9b52; }
.pi-suggested-order-title { margin: 14px 0 4px; font-weight: 700; color: var(--gray-700); }
.pi-suggested-order { margin: 0; padding-left: 18px; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
.photo-item { border: 1px solid #eee; border-radius: var(--radius-md); overflow: hidden; }
.photo-item img { width: 100%; height: 120px; object-fit: cover; }
.photo-angle-form { border-top: 1px solid #f0f0f0; }
.photo-angle-select { width: 100%; border: none; border-radius: 0; font-size: 16px; padding: 6px 8px; background: var(--gray-50); color: var(--gray-700); cursor: pointer; }
.photo-item-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px;
  font-size: 12px;
}
.photo-action-primary { display: inline-flex; }
.cover-badge { background: var(--red); color: var(--white); padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; }

/* ---------- Paso 10.3 -- gestión de vídeos (admin) ---------- */
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.video-item { border: 1px solid #eee; border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column; }
.video-item-preview { width: 100%; height: 150px; background: var(--black); object-fit: contain; }
.video-title-input { flex: 1; min-width: 0; border: none; border-top: 1px solid #f0f0f0; padding: 8px; font-size: 16px; background: var(--gray-50); }
.video-item .inline-form { display: flex; align-items: center; gap: 6px; }

.login-wrap { min-height: 80vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-card { background: var(--white); padding: 36px; border-radius: var(--radius-md); box-shadow: var(--shadow-soft); width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 14px; }
.login-card h1 { margin: 0; font-size: 22px; }
.login-sub { margin: 0 0 10px; color: var(--gray-700); }
.back-link { text-align: center; color: var(--gray-700); font-size: 13px; margin-top: 8px; }

.inquiry-row.unread { font-weight: 700; background: #fff8f4; }
.inquiry-message { max-width: 360px; white-space: pre-line; font-weight: 400 !important; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1000px) {
  .stats-bento { grid-template-columns: repeat(2, 1fr); }
  .category-grid { grid-template-columns: repeat(2, 1fr); }
  .about-grid { grid-template-columns: 1fr; }
  .contact-layout { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .vehicle-detail-grid { grid-template-columns: 1fr; }
  .vehicle-gallery { position: static; }
  .specs-grid { grid-template-columns: 1fr; }
  .equipment-list { grid-template-columns: 1fr; }
  .hero-content { padding: 130px 0 90px; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}
/* =========================================================================
   FASE 5 — Identidad digital propia (Trading Trucks & Machinery)
   Lenguaje visual original: numeracion industrial, etiquetas tecnicas,
   divisores tipo plano mecanico, cuadricula tecnica sutil, movimiento.
   No sustituye el sistema anterior: lo extiende.
   ========================================================================= */

/* ---------- Tipografia editorial (system-font premium, sin fuentes externas:
   este entorno no tiene acceso a Google Fonts/CDN de tipografia, asi que el
   caracter editorial se construye con peso, tracking y escala en vez de una
   familia tipografica nueva -- ver informe final, "SIGUIENTE FASE"). ---------- */
:root {
  --font-display: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --tick-red: var(--red-bright);
}
.text-mono-tech {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  letter-spacing: 0.5px;
}

/* ---------- Marca real (logo TTM) — componente centralizado BrandLogo ---------- */
/* El archivo maestro (public/images/brand/logo-master.jpg) es el JPG original
   del cliente, con su fondo blanco intacto (ningun recorte/quitado de fondo:
   un intento anterior de recorte por transparencia dejaba un halo gris
   visible sobre fondos oscuros). Se apoya sobre esta "placa" blanca
   redondeada para verse limpio tanto en la cabecera oscura como en el
   footer, en vez de mostrar un rectangulo blanco a bordes vivos. */
.brand-logo-plate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 8px;
  padding: 4px 8px;
  line-height: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.brand-logo-asset { display: block; width: auto; height: 100%; object-fit: contain; }
.brand-logo-sm { height: 34px; }
.brand-logo-md { height: 48px; }
.brand-logo-lg { height: 64px; }
.brand-logo-xl { height: 92px; }
@media (max-width: 700px) {
  .brand-logo-md { height: 40px; }
  .brand-logo-lg { height: 52px; }
}
.brand-wordmark {
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--white);
}
.brand-wordmark .accent { color: var(--red-bright); }

/* ---------- Cuadricula tecnica sutil (fondo, uso puntual) ---------- */
.tech-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
}

/* ---------- Etiqueta tecnica / "spec plate" (numeracion industrial) ---------- */
.plate-index {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--text-mono-tech, inherit);
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--gray-500);
}
.plate-index .num { color: var(--red-bright); font-size: 15px; }
.on-dark .plate-index, .plate-index.on-dark { color: var(--gray-300); }

/* Divisor tipo "plano tecnico": linea con marcas de esquina, como una cota de plano */
.blueprint-divider {
  position: relative;
  height: 1px;
  background: var(--line-on-dark);
  margin: 0;
}
.blueprint-divider::before, .blueprint-divider::after {
  content: "";
  position: absolute;
  top: -4px;
  width: 1px;
  height: 9px;
  background: var(--line-on-dark);
}
.blueprint-divider::before { left: 0; }
.blueprint-divider::after { right: 0; }
.blueprint-divider.light { background: var(--gray-200); }
.blueprint-divider.light::before, .blueprint-divider.light::after { background: var(--gray-300); }

/* ---------- Linea de movimiento roja (microinteraccion de marca) ----------
   Se activa por scroll-reveal (misma infraestructura [data-reveal]) barriendo
   de izquierda a derecha: sugiere carretera/desplazamiento, no decora porque
   siempre acompaña a un cambio real de seccion. */
.motion-line {
  position: relative;
  height: 3px;
  width: 100%;
  background: var(--line-on-dark);
  overflow: hidden;
  border-radius: 2px;
}
.motion-line.light { background: var(--gray-200); }
.motion-line::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 0%;
  background: linear-gradient(90deg, var(--red), var(--red-bright));
  transition: width 0.9s var(--ease) 0.15s;
}
[data-reveal].in-view .motion-line::after,
.motion-line.in-view::after { width: 100%; }
@media (prefers-reduced-motion: reduce) {
  .motion-line::after { transition: none; width: 100%; }
}

/* =========================================================================
   HERO v2 — composicion editorial (sustituye el hero centrado convencional)
   ========================================================================= */
.hero-v2 {
  position: relative;
  background: var(--black);
  color: var(--white);
  overflow: hidden;
  min-height: 92vh;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: stretch;
}
.hero-v2-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 150px 56px 110px clamp(24px, 5vw, 80px);
}
.hero-v2-brandmark { margin-bottom: 22px; opacity: 0.96; }
.hero-v2-eyebrow-row { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
.hero-v2-title {
  font-size: clamp(44px, 6vw, 84px);
  line-height: 0.96;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0 0 20px;
}
.hero-v2-title .accent { color: var(--red-bright); display: block; }
.hero-v2-lead { font-size: 17px; color: var(--gray-300); max-width: 420px; margin: 0 0 34px; }
.hero-v2-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 46px; }
.hero-v2-readout {
  display: flex;
  gap: 32px;
  padding-top: 26px;
  border-top: 1px solid var(--line-on-dark);
  max-width: 460px;
}
.hero-v2-readout-item .val {
  font-size: 30px;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.hero-v2-readout-item .val .accent { color: var(--red-bright); }
.hero-v2-readout-item .lbl {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--gray-500);
}
.hero-v2-visual {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background: var(--charcoal);
}
.hero-v2-visual .tech-grid-bg { background-size: 48px 48px; }
.hero-v2-visual-media {
  position: absolute;
  inset: clamp(20px, 3vw, 36px);
  z-index: 2;
  border-radius: 22px;
  overflow: hidden;
  transition: transform 0.6s var(--ease);
}
.hero-v2-visual-media img, .hero-v2-visual-media svg, .hero-v2-visual-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-visual-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--gray-600);
  background:
    radial-gradient(circle at 30% 20%, rgba(200,30,44,0.10), transparent 55%),
    linear-gradient(155deg, var(--charcoal-2) 0%, var(--black-soft) 100%);
}
.hero-visual-placeholder p {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gray-500);
}
.hero-v2-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(6,6,7,0.9) 0%, rgba(6,6,7,0.05) 16%, rgba(6,6,7,0) 40%);
  z-index: 1;
}
.hero-v2-visual-plate {
  position: absolute;
  left: 28px;
  bottom: 28px;
  z-index: 2;
  background: rgba(6, 6, 7, 0.72);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line-on-dark);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gray-300);
}
.hero-v2-visual-plate strong { color: var(--white); display: block; font-size: 13px; letter-spacing: 0.5px; margin-bottom: 2px; }
.hero-v2-arc {
  position: absolute;
  right: -10%;
  top: -15%;
  width: 70%;
  height: 70%;
  border-radius: 50%;
  border: 2px solid rgba(228, 37, 54, 0.5);
  z-index: 1;
  animation: heroArcSpin 50s linear infinite;
}
.hero-v2-arc::after {
  content: "";
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  border: 1px solid rgba(228, 37, 54, 0.25);
}
@keyframes heroArcSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-v2-arc { animation: none; }
}
.hero-v2-scroll-cue {
  position: absolute;
  left: clamp(24px, 5vw, 80px);
  bottom: 30px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--gray-500);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.hero-v2-scroll-cue .line { width: 1px; height: 30px; background: linear-gradient(var(--red-bright), transparent); animation: scrollcue 1.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .hero-v2-scroll-cue .line { animation: none; }
}
@media (max-width: 1000px) {
  .hero-v2 { grid-template-columns: 1fr; min-height: auto; }
  .hero-v2-visual { min-height: 46vh; }
  .hero-v2-copy { padding: 120px 24px 60px; }
  .hero-v2-readout { gap: 22px; flex-wrap: wrap; }
}

/* =========================================================================
   STOCK DESTACADO — presentacion editorial ("VEHICULO 01") en vez de 3 tarjetas
   ========================================================================= */
.showcase {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 0;
  border: 1px solid var(--line-on-dark);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--charcoal);
}
.showcase-panel { display: contents; }
.showcase-panel[hidden] { display: none; }
.showcase-media { position: relative; aspect-ratio: 4/3; background: var(--black-soft); overflow: hidden; }
.showcase-media img { width: 100%; height: 100%; object-fit: cover; }
.showcase-media .badge { top: 20px; left: 20px; }
.showcase-index {
  position: absolute;
  left: 20px;
  bottom: 20px;
  z-index: 1;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--white);
  background: rgba(6,6,7,0.7);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
}
.showcase-index .of { color: var(--gray-500); font-weight: 600; }
.showcase-body { padding: 44px clamp(24px, 3vw, 48px); color: var(--white); display: flex; flex-direction: column; }
.showcase-cat { color: var(--red-bright); }
.showcase-title { font-size: clamp(26px, 2.6vw, 38px); text-transform: uppercase; letter-spacing: -0.01em; margin: 14px 0 22px; }
.showcase-specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 20px; margin-bottom: 28px; }
.showcase-specs .k { font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gray-500); margin-bottom: 3px; }
.showcase-specs .v { font-size: 15px; font-weight: 700; color: var(--white); }
.showcase-price { font-size: 24px; font-weight: 800; margin: 0 0 22px; }
.showcase-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: auto; }
.showcase-tabs { display: flex; gap: 8px; margin-top: 26px; flex-wrap: wrap; }
.showcase-tab {
  width: 34px;
  height: 4px;
  border-radius: 2px;
  background: var(--line-on-dark);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.25s var(--ease), width 0.25s var(--ease);
}
.showcase-tab.active { background: var(--red-bright); width: 50px; }
@media (max-width: 900px) {
  .showcase { grid-template-columns: 1fr; }
  .showcase-body { padding: 30px 22px 34px; }
  .showcase-specs { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================================
   CATEGORIAS v2 — index numerico + contador real de unidades
   ========================================================================= */
.category-card-v2 {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--charcoal);
  display: block;
  border: 1px solid var(--line-on-dark);
}
.category-card-v2 .category-card-media { position: absolute; inset: 0; }
.category-card-v2 .category-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.category-card-v2:hover .category-card-media img { transform: scale(1.08); }
.category-card-v2::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0) 25%, rgba(10,10,10,0.94) 100%);
}
.category-card-v2-index {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 1;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--gray-300);
  background: rgba(6,6,7,0.55);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
}
.category-card-v2-label { position: absolute; left: 22px; right: 22px; bottom: 20px; z-index: 1; color: var(--white); }
.category-card-v2-label h3 { font-size: 18px; letter-spacing: 0.3px; text-transform: uppercase; margin-bottom: 6px; }
.category-card-v2-count {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--gray-300);
}
.category-card-v2-count .arrow {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.35);
  display: flex; align-items: center; justify-content: center; transition: background 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.category-card-v2:hover .category-card-v2-count .arrow { background: var(--red); border-color: var(--red); transform: translateX(3px); }

/* =========================================================================
   Panel de cifras — separa claramente REAL (stock actual) de PENDIENTE
   ========================================================================= */
.stats-dossier { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-on-dark); border: 1px solid var(--line-on-dark); border-radius: var(--radius-lg); overflow: hidden; }
.stats-dossier .stat-tile { border: none; border-radius: 0; background: var(--charcoal); }
.stats-dossier .stat-tile.is-real { background: var(--charcoal-2); }
.stats-dossier .stat-tile.is-real .stat-value { color: var(--red-bright); }
.stats-dossier .stat-tag {
  display: inline-block;
  margin-top: 10px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
}
.stats-dossier .stat-tile.is-real .stat-tag { background: rgba(228,37,54,0.18); color: var(--red-bright); }
.stats-dossier .stat-tile:not(.is-real) .stat-tag { background: rgba(255,255,255,0.06); color: var(--gray-500); }
@media (max-width: 1000px) { .stats-dossier { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .stats-dossier { grid-template-columns: 1fr; } }

/* =========================================================================
   STOCK — sidebar sticky + toggle grid/lista
   ========================================================================= */
.stock-layout { display: grid; grid-template-columns: 272px 1fr; gap: 32px; align-items: start; margin-top: -56px; position: relative; z-index: 2; padding-bottom: 20px; }
/* Paso 10.8 -- bug real de móvil encontrado en la regresión: un elemento
   grid sin min-width explícito por defecto no se encoge por debajo del
   ancho "intrínseco" de su contenido (aquí, el <select> más ancho de los
   filtros), así que en pantallas estrechas el sidebar (y por tanto todo
   .stock-layout) se salía del viewport y provocaba scroll horizontal en
   TODA la página. min-width: 0 es la corrección estándar para que un item
   de grid pueda encogerse hasta el ancho real disponible. */
.stock-layout > * { min-width: 0; }
.stock-sidebar {
  position: sticky;
  top: 90px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow-soft);
  min-width: 0;
}
.stock-sidebar .filters { grid-template-columns: 1fr; }
.stock-sidebar-title { font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gray-500); margin-bottom: 14px; }

/* Prompt final, seccion 9 -- el boton "Filtros" solo existe visualmente por
   debajo de 1000px (mismo punto de corte en el que .stock-layout pasa a una
   columna). En escritorio el sidebar siempre esta visible y este boton
   permanece oculto e inerte. */
.stock-filters-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  padding: 13px 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-900);
  cursor: pointer;
  margin-bottom: 14px;
}
.stock-filters-toggle.is-open { border-color: var(--gray-900); }
.stock-filters-count {
  background: var(--red);
  color: var(--white);
  font-size: 11px;
  font-weight: 800;
  border-radius: 999px;
  min-width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  margin-left: auto;
}
.view-toggle { display: inline-flex; border: 1px solid var(--gray-300); border-radius: var(--radius-sm); overflow: hidden; }
.view-toggle button {
  background: var(--white);
  border: none;
  padding: 9px 14px;
  cursor: pointer;
  color: var(--gray-600);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
}
.view-toggle button.active { background: var(--gray-900); color: var(--white); }
.view-toggle button + button { border-left: 1px solid var(--gray-300); }

.vehicle-grid.is-list { display: grid; grid-template-columns: 1fr; gap: 14px; }
.vehicle-grid.is-list .vehicle-card { flex-direction: row; }
.vehicle-grid.is-list .vehicle-card-img { width: 220px; flex-shrink: 0; aspect-ratio: 4/3; }
.vehicle-grid.is-list .vehicle-card-body { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 18px; padding: 16px 22px; }
.vehicle-grid.is-list .vehicle-card-body > div:first-child { flex: 1; min-width: 200px; }
.vehicle-grid.is-list .vehicle-card-footer { margin-top: 0; border-top: none; padding-top: 0; flex-shrink: 0; }
@media (max-width: 1000px) {
  .stock-layout { grid-template-columns: 1fr; }
  .stock-sidebar { position: static; }
  .vehicle-grid.is-list .vehicle-card { flex-direction: column; }
  .vehicle-grid.is-list .vehicle-card-img { width: 100%; }
  .vehicle-grid.is-list .vehicle-card-body { flex-direction: column; align-items: stretch; }

  /* El panel de filtros arranca colapsado en movil/tablet estrecha: nunca
     ocupa la primera pantalla entera antes de llegar a los resultados. */
  .stock-filters-toggle { display: flex; }
  .stock-sidebar { display: none; }
  .stock-sidebar.open { display: block; margin-bottom: 18px; }
}

/* =========================================================================
   Ficha de vehiculo — especificaciones estilo documentacion industrial
   ========================================================================= */
.spec-sheet { border: 1px solid var(--gray-200); border-radius: var(--radius-md); overflow: hidden; }
.spec-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: var(--gray-900);
  color: var(--white);
}
.spec-sheet-head .plate-index { color: var(--gray-300); }
.spec-sheet-head .plate-index .num { color: var(--red-bright); }
.spec-grid-v2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--gray-200); }
.spec-tile-v2 { background: var(--white); padding: 16px 18px; }
.spec-tile-v2 .spec-label { font-family: "SFMono-Regular", Consolas, monospace; font-size: 10px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gray-500); margin-bottom: 5px; }
.spec-tile-v2 .spec-value { font-size: 16px; font-weight: 800; color: var(--gray-900); font-variant-numeric: tabular-nums; }

/* Barra de acciones flotante en movil (WhatsApp / Llamar / Consultar) */
.mobile-cta-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 95;
  background: rgba(10,10,10,0.97);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line-on-dark);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  gap: 8px;
}
.mobile-cta-bar a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 6px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.mobile-cta-bar .mcb-wa { background: #1fb955; color: var(--white); }
.mobile-cta-bar .mcb-call { background: var(--charcoal-3); color: var(--white); }
.mobile-cta-bar .mcb-info { background: var(--red); color: var(--white); }
@media (max-width: 700px) {
  .mobile-cta-bar { display: flex; }
  body.has-mobile-cta { padding-bottom: 74px; }
  .whatsapp-float { display: none; }
}

/* =========================================================================
   Microinteracciones adicionales: contador numerico + parallax de cursor
   ========================================================================= */
.count-up { display: inline-block; }
[data-parallax] { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  [data-parallax] { transform: none !important; }
}
@media (pointer: coarse) {
  [data-parallax] { transform: none !important; }
}

/* =========================================================================
   Admin — dashboard operativo + AI Vehicle Assistant
   ========================================================================= */
.admin-stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.admin-stat-card { background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); padding: 20px 22px; border-left: 4px solid var(--gray-300); }
.admin-stat-card .n { font-size: 30px; font-weight: 800; color: var(--gray-900); line-height: 1; }
.admin-stat-card .l { margin-top: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--gray-600); }
.admin-stat-card.stat-disponible { border-left-color: #1e9e4a; }
.admin-stat-card.stat-reservado { border-left-color: #c88a00; }
.admin-stat-card.stat-vendido { border-left-color: #6a6a6a; }
.admin-stat-card.stat-mensajes { border-left-color: var(--red); }
.admin-quick-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 30px; }
@media (max-width: 900px) { .admin-stats-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .admin-stats-row { grid-template-columns: 1fr; } }

.ai-assistant-card {
  background: linear-gradient(180deg, #16161a 0%, #0d0d0f 100%);
  color: var(--white);
  border-radius: var(--radius-md);
  padding: 26px 26px 24px;
  margin-bottom: 24px;
  border: 1px solid #26262b;
}
.ai-assistant-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 4px; }
.ai-assistant-title { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 800; letter-spacing: 0.3px; }
.ai-assistant-badge { font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; padding: 4px 9px; border-radius: 20px; }
.ai-assistant-badge.on { background: rgba(31,185,85,0.18); color: #3ddc84; }
.ai-assistant-badge.off { background: rgba(255,255,255,0.08); color: var(--gray-300); }
.ai-assistant-sub { font-size: 13px; color: var(--gray-500); margin: 6px 0 18px; max-width: 640px; }
.ai-assistant-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.ai-assistant-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.ai-tool-btn {
  background: rgba(255,255,255,0.06);
  border: 1px solid #2b2b30;
  color: var(--gray-300);
  border-radius: var(--radius-sm);
  padding: 8px 13px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.ai-tool-btn:hover:not(:disabled) { background: var(--red); border-color: var(--red); color: var(--white); }
.ai-tool-btn:disabled { opacity: 0.4; cursor: default; }
.ai-assistant-status { font-size: 12px; color: var(--gray-500); margin-top: 10px; min-height: 16px; }
.ai-assistant-status.is-error { color: #ff8a80; }
.ai-result { margin-top: 18px; display: none; gap: 16px; }
.ai-result.visible { display: grid; }
.ai-result-block {
  background: rgba(255,255,255,0.03);
  border: 1px solid #232327;
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}
.ai-result-block-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.ai-result-block-head h4 { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--gray-500); }
.ai-result-block textarea, .ai-result-block .ai-static-text {
  width: 100%;
  background: transparent;
  border: none;
  color: var(--white);
  font-size: 13.5px;
  line-height: 1.6;
  padding: 0;
  resize: vertical;
  min-height: 44px;
}
.ai-result-block textarea:focus { outline: none; }
.ai-mini-btn {
  background: transparent;
  border: 1px solid #2b2b30;
  color: var(--gray-300);
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.ai-mini-btn:hover { border-color: var(--red); color: var(--white); }
.ai-mini-btn.applied { border-color: #3ddc84; color: #3ddc84; }
.ai-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-chip { background: rgba(255,255,255,0.06); border-radius: 20px; padding: 4px 11px; font-size: 11.5px; color: var(--gray-300); }
.ai-not-configured-box {
  background: rgba(255,255,255,0.03);
  border: 1px dashed #33333a;
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  font-size: 13px;
  color: var(--gray-400);
  margin-top: 14px;
  display: none;
}
.ai-not-configured-box.visible { display: block; }
.ai-not-configured-box code { background: rgba(255,255,255,0.08); padding: 2px 6px; border-radius: 3px; font-size: 12px; }

/* ---------- Fase 7: grupos conceptuales del AI Vehicle Assistant + trazabilidad ---------- */
.ai-group-title {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gray-500);
  margin: 20px 0 8px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.ai-result > .ai-group-title:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.ai-sources {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px dashed #33333a;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.02);
}
.ai-sources-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ai-sources-list li {
  background: rgba(255,255,255,0.06);
  border-radius: 20px;
  padding: 4px 11px;
  font-size: 11.5px;
  color: var(--gray-300);
}
.ai-sources-list li strong { color: #fff; font-weight: 700; }

@media (max-width: 700px) {
  .ai-assistant-card { padding: 20px; }
  .ai-assistant-actions .btn, .ai-assistant-actions button { flex: 1; }
}

/* ---------- Fase 6: Vehicle Intelligence ---------- */
.vi-panel {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: 24px 26px;
  margin-bottom: 24px;
}
.vi-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.vi-score { text-align: right; display: flex; flex-direction: column; align-items: flex-end; min-width: 140px; }
.vi-score strong { font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -0.5px; }
.vi-score span { font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--gray-500); margin-top: 4px; }
.vi-score-high strong { color: #1f9b52; }
.vi-score-mid strong { color: #b8790a; }
.vi-score-low strong { color: var(--red); }
.vi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin-bottom: 16px; }
.vi-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gray-200);
  background: var(--gray-50);
}
.vi-field-label { font-size: 11.5px; font-weight: 700; color: var(--gray-700); }
.vi-field-state { font-size: 10.5px; font-weight: 800; letter-spacing: 0.3px; text-transform: uppercase; }
.vi-field-confirmado { border-color: #bfe6cc; background: #f1faf4; }
.vi-field-confirmado .vi-field-state { color: #1f9b52; }
.vi-field-pendiente .vi-field-state { color: var(--gray-500); }
.vi-field-sugerido_ia { border-color: #f3d9a6; background: #fdf7ec; }
.vi-field-sugerido_ia .vi-field-state { color: #b8790a; }
.vi-field-no_disponible .vi-field-state { color: var(--gray-400); }
.vi-photo-coverage { font-size: 12.5px; color: var(--gray-600); margin-bottom: 12px; }
.vi-photo-coverage summary { cursor: pointer; font-weight: 700; }
.vi-photo-coverage ul { list-style: none; padding: 10px 0 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; }
.vi-photo-coverage li.ok { color: #1f9b52; }
.vi-photo-coverage li.missing { color: var(--gray-500); }
.vi-suggestion { font-size: 12.5px; color: var(--gray-600); margin: 0; }

/* Paso 10.4C -- "Calidad del anuncio": diferencia visualmente lo determinista
   (siempre activo) de lo que depende de un proveedor de IA externo. */
.vi-ai-split { display: grid; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--gray-200); }
.vi-ai-split-item { margin: 0; font-size: 12.5px; padding: 10px 14px; border-radius: var(--radius-sm); }
.vi-ai-split-item.vi-ai-split-ok { background: #f1faf4; color: #1f9b52; border: 1px solid #bfe6cc; }
.vi-ai-split-item.vi-ai-split-off { background: var(--gray-50); color: var(--gray-600); border: 1px solid var(--gray-200); }
.vi-ai-split-item code { background: rgba(0,0,0,0.06); padding: 1px 5px; border-radius: 3px; }
.vi-field-no_aplica { border-color: var(--gray-200); background: var(--gray-50); opacity: 0.65; }
.vi-field-no_aplica .vi-field-state { color: var(--gray-400); }

/* ---------- Fase 7: Vehicle Intelligence 2.0 (readiness + grupos) ---------- */
.vi-readiness { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 10px; margin-bottom: 18px; font-weight: 800; letter-spacing: 0.3px; font-size: 13px; }
.vi-readiness-no_listo { background: #fdecec; color: #b3261e; border: 1px solid #f3c6c3; }
.vi-readiness-casi_listo { background: #fdf7ec; color: #8a5a00; border: 1px solid #f3d9a6; }
.vi-readiness-listo_para_publicar { background: #f1faf4; color: #1f9b52; border: 1px solid #bfe6cc; }
.vi-readiness-reasons { margin: -10px 0 16px; padding-left: 20px; font-size: 12.5px; color: var(--gray-600); }

/* Paso 8.6/8.7 -- estado de cobertura para reconstruccion 3D real (mismos
   colores que vi-readiness, para que el vocabulario visual sea coherente). */
.readiness3d-badge { display: inline-block; padding: 8px 14px; border-radius: 10px; font-weight: 800; letter-spacing: 0.3px; font-size: 12.5px; margin: 4px 0 8px; }
.readiness3d-sin_material, .readiness3d-fotos_insuficientes { background: #fdecec; color: #b3261e; border: 1px solid #f3c6c3; }
.readiness3d-faltan_angulos { background: #fdf7ec; color: #8a5a00; border: 1px solid #f3d9a6; }
.readiness3d-listo_para_reconstruccion { background: #f1faf4; color: #1f9b52; border: 1px solid #bfe6cc; }
.vi-group { margin-bottom: 16px; }
.vi-group-title { font-size: 11px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; color: var(--gray-500); margin: 0 0 8px; }

/* ---------- Fase 6: Contenido 3D / 360 ---------- */
.content3d-block { padding: 16px 0; border-top: 1px solid var(--gray-200); }
.content3d-block:first-of-type { border-top: none; padding-top: 0; }
.content3d-block h3 { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; margin: 0 0 8px; }

/* Bug real encontrado en la auditoria movil final: la cabecera (logo +
   enlaces + "Panel admin" + "Ver stock") necesita ~888px de ancho real para
   caber en una sola linea. Con el punto de corte anterior (700px) quedaba un
   hueco entre 700px y ~900px donde NO se mostraba el menú hamburguesa pero
   tampoco cabía la cabecera de escritorio -- scroll horizontal real en toda
   la web publica en ese rango (tablets en vertical, moviles grandes en
   horizontal, ventanas de escritorio no maximizadas). Separado del resto de
   ajustes de 700px porque el resto del contenido (hero, stats...) sí cabe
   bien hasta ahí; solo la cabecera necesitaba un punto de corte mas amplio. */
@media (max-width: 920px) {
  .nav-toggle { display: flex; }
  .nav-extra .nav-whatsapp { display: none; }
  .nav-extra .nav-cta { display: inline-flex; }
  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--black);
    flex-direction: column;
    align-items: flex-start;
    padding: 22px 24px 28px;
    gap: 18px;
    border-bottom: 1px solid var(--line-on-dark);
    max-height: calc(100vh - 64px);
    overflow-y: auto;
  }
  .main-nav.open { display: flex; }
  .main-nav a { font-size: 16px; }
  .main-nav .nav-cta, .main-nav .nav-admin { width: 100%; text-align: center; }
}

@media (max-width: 700px) {
  .header-inner { padding: 12px 20px; }
  .site-header { position: sticky; }

  .hero { min-height: auto; }
  .hero-content { padding: 110px 0 70px; }
  .hero-actions .btn { flex: 1; }
  .hero-scroll-cue { display: none; }

  .stats-bento { grid-template-columns: 1fr; }
  .stat-tile.span-2 { grid-column: span 1; }
  /* Dos columnas en movil (antes una sola): la tarjeta se hace mas cuadrada
     y el texto se reduce para que quepa "MAQUINARIA DE CONSTRUCCIÓN" (la
     etiqueta mas larga) sin desbordar ni recortarse, comprobado a 320px. */
  .category-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .category-card-v2 { aspect-ratio: 1/1; }
  .category-card-v2-index { top: 10px; left: 10px; font-size: 9px; padding: 4px 7px; }
  .category-card-v2-label { left: 12px; right: 12px; bottom: 12px; }
  /* overflow-wrap: sin esto, una etiqueta de una sola palabra larga (p.ej.
     "SEMIRREMOLQUES", sin espacios donde partir la linea) se salia de la
     tarjeta y se recortaba en vez de bajar de linea -- bug real encontrado
     al probar a 320px de ancho. */
  .category-card-v2-label h3 { font-size: 12px; line-height: 1.2; margin-bottom: 4px; overflow-wrap: break-word; }
  .category-card-v2-count { font-size: 10px; }
  .category-card-v2-count .arrow { width: 22px; height: 22px; }

  .filters-panel { margin-top: -32px; padding: 18px; }
  .stock-layout { margin-top: -32px; }
  .stock-sidebar { padding: 18px; }
  .contact-layout { margin-top: -32px; }
  .contact-form .form-row { grid-template-columns: 1fr; }

  .rocket-cta { padding: 56px 22px; }
  .footer-inner { grid-template-columns: 1fr; gap: 32px; padding: 48px 0 24px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* =========================================================================
   PASO 9 -- calidad de fotografias, guia de captura, gestion de fotos en
   movil, y aprobacion/publicacion de modelos 3D.
   ========================================================================= */

/* ---------- 9.2 -- panel de calidad real para fotogrametria ---------- */
.fotogrametria-quality { margin-bottom: 12px; }

/* ---------- 9.3 -- guia de captura visual (circulo de posiciones) ---------- */
.capture-guide { margin: 10px 0 18px; }
.capture-guide-circle {
  position: relative;
  width: 220px;
  height: 220px;
  max-width: 100%;
  margin: 12px auto 14px;
  border: 2px dashed var(--gray-300);
  border-radius: 50%;
  background: var(--gray-50);
}
.capture-guide-vehicle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--gray-500);
}
.capture-guide-circle { overflow: visible; }
.capture-guide-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 62px;
}
.capture-guide-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-weight: 800;
  font-size: 12px;
  line-height: 1;
}
.capture-guide-marker-ok .capture-guide-mark, .capture-guide-mark.ok { background: #f1faf4; color: #1f9b52; border: 1px solid #bfe6cc; }
.capture-guide-marker-warn .capture-guide-mark, .capture-guide-mark.warn { background: #fdf7ec; color: #8a5a00; border: 1px solid #f3d9a6; }
.capture-guide-marker-x .capture-guide-mark, .capture-guide-mark.x { background: #fdecec; color: #b3261e; border: 1px solid #f3c6c3; }
.capture-guide-label { font-size: 10px; color: var(--gray-600); text-align: center; line-height: 1.15; }
.capture-guide-legend { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--gray-700); }
.capture-guide-legend li { display: flex; align-items: center; gap: 6px; }

/* ---------- 9.4 -- gestion de fotos en movil: ancho completo, seleccion masiva ---------- */
.photo-bulk-toolbar { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; flex-wrap: wrap; }
.photo-select-all-label { font-size: 12.5px; font-weight: 600; color: var(--gray-700); }
.photo-select-checkbox-wrap { position: absolute; top: 6px; left: 6px; z-index: 2; background: rgba(255,255,255,0.85); border-radius: 4px; padding: 2px; line-height: 0; }
.photo-select-checkbox { width: 18px; height: 18px; cursor: pointer; }
.photo-item { position: relative; }
.photo-meta { margin: 0; padding: 6px 8px 0; font-size: 11px; color: var(--gray-600); line-height: 1.3; }
.photo-quality-flags { color: #8a5a00; font-weight: 600; }

@media (max-width: 480px) {
  /* 9.4/9.5 -- en movil, una sola columna a (casi) todo el ancho en vez de
     una rejilla de miniaturas diminutas: cada foto se ve grande y los
     controles (angulo, portada, mover, eliminar) tienen mas espacio para el
     dedo, en vez de amontonarse en una tarjeta de 160px. */
  .photo-grid { grid-template-columns: 1fr; gap: 14px; }
  .photo-item img { height: 220px; }
  .photo-angle-select { font-size: 16px; padding: 10px 8px; }
  .photo-item-footer { font-size: 13px; padding: 10px; }
  .photo-item-move button { width: 34px; height: 34px; font-size: 14px; }
  .capture-guide-circle { width: 260px; height: 260px; }

  /* 9.5 -- calidad visual real (no solo ausencia de overflow): mas aire y
     controles mas grandes en formularios largos y botones del panel admin. */
  .admin-form label { font-size: 13.5px; }
  .admin-form input, .admin-form select, .admin-form textarea { font-size: 16px; padding: 11px 12px; }
  .btn, .btn-outline-dark, .btn-primary { padding: 12px 16px; font-size: 14px; }
  .upload-form { gap: 10px; }
  .photo-manager, .vi-panel, .ai-assistant-card { padding: 16px; }
  .content3d-block { padding: 14px 0; }
}
@media (min-width: 481px) and (max-width: 700px) {
  .photo-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- 9.7 -- aprobacion/publicacion de modelos 3D ---------- */
.model3d-review-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 8px 0; }

/* ---------- 9.11 -- filtros de auditoria ---------- */
.audit-filters { display: flex; gap: 14px; flex-wrap: wrap; align-items: end; background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius-md); padding: 16px; margin-bottom: 18px; }
.audit-filters label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; font-weight: 700; color: var(--gray-600); text-transform: uppercase; letter-spacing: 0.3px; }
.audit-filters input, .audit-filters select { font-size: 16px; padding: 8px 10px; border: 1px solid var(--gray-300); border-radius: 6px; }
.audit-filters-actions { display: flex; align-items: center; gap: 12px; }
@media (max-width: 480px) {
  .audit-filters { flex-direction: column; align-items: stretch; padding: 14px; }
  .audit-filters label { width: 100%; }
  .audit-filters input, .audit-filters select { width: 100%; font-size: 16px; padding: 10px; }
}