/* Visor a pantalla completa de la ficha del vehículo (ver page/js/vehiculo-zoom.js). */

.vd-gallery img.vd-carousel-img { cursor: zoom-in; }

.vd-single-img { position: relative; }

/* Botón "Ampliar": arriba a la izquierda, el contador va abajo a la derecha. */
.vd-zoom-btn {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(4px);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: background 0.2s, border-color 0.2s;
}
.vd-zoom-btn:hover,
.vd-zoom-btn:focus-visible { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }

/* Sin mouse no hay hover: las flechas quedaban invisibles en el celular. */
@media (hover: none) {
  .vd-carousel-btn { opacity: 1; }
}